web-dev-qa-db-ja.com

jQueryアコーディオン：IEアニメーションの問題

更新

私はこれをコミュニティウィキにしています。理由は次の3つです。

  • 明確な答えが得られたとは思いませんが、
  • 自分のアコーディオン機能を使ったので、答えが必要なくなって久しい
  • この質問にはたくさんの意見が寄せられているので、明らかに多くの人々がまだ興味を持っています

したがって、誰かがこの質問を変更/明確化し、それを決定的なガイドにしたい場合は、私のゲストになってください。

JQueryの アコーディオンUI要素 を使用してページで作業しています。 <li>要素内に、順序付けられていないリンクのリストがあることを除いて、その例に基づいてHTMLをモデル化しました。このような：

  $(document).ready(function() {
     $(".ui-accordion-container").accordion(
        {active: "a.default", alwaysOpen: true, autoHeight: false}
     );
  });

  <ul class="ui-accordion-container">
  <li> <!-- Start accordion section -->
   <a href='#' class="accordion-label">A Group of Links</a>
   <ul class="linklist">
      <li><a href="http://example.com">Example Link</a></li>
      <li><a href="http://example.com">Example Link</a></li>
   </ul>

   <!--and of course there's another group -->

問題：IEアニメーションの悪臭

IE7は、ドキュメントのアコーディオンメニューの例をうまくアニメーション化しますが、私の問題があります。具体的には、ページ上の1つのアコーディオンメニューがぎくしゃくして動き、コンテンツが点滅します。 CSSファイルを含めないと同じことが起こるので、CSSの問題ではないことを知っています。

ページ上の他のアコーディオンメニューは、クリックした最初のセクションを開き、その後はどのセクションも開きません。

これらの問題はどちらもIE固有のものであり、オプションanimated: falseを使用すると両方とも解消されます。ただし、メニューの動作をユーザーが理解するのに役立つため、デフォルトのslideアニメーションを維持したいと思います。

別の方法はありますか？

jqueryaccordion
17
Nathan Long

あなたの痛みが分かります！私は最近、マスターページとページレイアウトからすべてをブロックごとに（これは実際にはSharePointにありました）引き裂き、ページを継続的にスリム化するというばかげたトラブルシューティングを行いました。

最終的な結果は、htmlドキュメントのドキュメントタイプを持たないことになりました（一部の開発者はそれを削除しました）。 Doctypeがないということは、IE 7がquirksモードで実行されており、JQueryアコーディオンによって発行されたインラインCSSがファンキーに動作していたことを意味します。

追加を検討してください：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

マスターページまたはhtmlドキュメントの上部（まだDoctypeが定義されていない場合）。

実際には、Quirksモードの動作専用のサイト全体があります。 Quirks Modeはこちら に関する記事をチェックしてください。 I 投稿を書きました トラブルシューティングに関するもう少し周囲の情報があります。

21
Tyler

整形式の標準HTMLマークアップを使用したIE7のすべてと同じ問題。最終的に機能したのは、autoHeight: "false"を削除してclearStyle: "true"を使用することでした。
また、IE <8バージョンのアコーディオン初期化を作成しました：

if ( $.browser.msie && $.browser.version < 8 ) {
    //ie<8 version
}
else {
    //version for the good browsers
}
6
IanI

アコーディオンプラグインは自分のニーズに少し柔軟性がないことがわかったので、実際には使用を避けました。最も簡単で柔軟なアコーディオンは次のように単純であることがわかりました。

var accordion = function(toggleEl, accEl) {
    toggleEl.click(function() {
        accEl.slideToggle(function() { });
        return false;
    });
}

あなたの例では、次のように使用します。

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"));        
});

これをテンプレートとして使用し、cssクラスの追加、コールバック、その他の便利なものを組み込むことができますが、最終的には、アコーディオンプラグインをいじくり回すよりも、この方法で行う方がはるかに簡単であることがわかりました。

編集：コールバック関数を使用したサンプルコード

var accordion = function(toggleEl, accEl, callback) {
    toggleEl.click(function() {
        accEl.slideToggle(callback);
        return false;
    });
}

$(document).ready(function() {
    new accordion($("a.accordion-label"), $("ul. linklist"), function() { /* some callback */ });        
});
5
Darko Z

同様の問題があり、このドキュメントタイプを追加して修正します。そしてそれはIEとFFの両方で機能します

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
2
Ben

同じ問題が発生しましたが、これによりIE 6および7：

$().ready(function(){
  $(".ui-accordion-header").click(function() {
    $(this).next().fadeIn();
  });
)};

とにかくスライドが見栄えが良くなると思います...

2
Schulty

アンカータグをSPANタグに変更します。私は同じ問題を経験していました、そしてそれはうまくいきました。同じことがDIVタグにも当てはまります。IE何らかの理由でアコーディオンになっているとトリップします。位置：絶対にフリークすることもありますIE out、fyi

1
Josh

autoHeight: falseをautoHeight: true->に変更するだけでうまくいきましたが、私が望んでいたものではありませんでした...

IE7にmin-heightを追加すると、問題が解決したことがわかります。

0
sebastien

同様の問題があり、Doctypeを検討することを提案している人が何人かいます。私は実際のjQueryUIサイトを表示しようとしましたが、それらのデモアコーディオンはie6で問題なく機能し、コードに問題があることを示唆していますis私のコードに問題があります（私にとってはより探偵的な仕事です）。しかし、jquery.UIサイトのdoctypeが単に<!DOCTYPE html>であることにも気づきました。

0
nedlud

IE6とIE7のアコーディオンで同様の問題が発生し、アコーディオンにデフォルトのHTML構造を使用していませんでした。不思議なことに、アコーディオン要素の水平サイズを特定のピクセル数に固定すると、アコーディオンアニメーションの問題が解決しました。どうして？知りません。しかし、問題はautoHeight：trueの使用に固有であり、問​​題はアニメーションの最後に発生し、アコーディオン要素の高さがリセットされたと想定していることがわかりました。そして、私たちは皆、IEは数学を行うことができないことを知っています。

0
Aaron

これを使用してみてください：

{active: "a.default", alwaysOpen: "true", autoHeight: "false"}

これの代わりに：

{active: "a.default", alwaysOpen: true, autoHeight: false}

Explorerには、この種の構文に問題があります。

0
Menachem Almog

オプションで設定する必要があります：

 navigation: true
0
Pim Jager

青いページの背景の上に白い背景があるアコーディオンのヘッダーの下のdivの背景色が消えるという問題がありました。別のヘッダー要素にカーソルを合わせると、表示されることがあります。テキストを強調表示すると、テキストも再び表示されることがあります。それは非常に奇妙で、IE7でのみ発生しました。

ズームの適用：1; ui-content divでIE7のみをターゲットにすると、これが修正されました。

私はこれを追跡するために数時間を費やしたので、それが誰かに役立つことを願っています。

0
Joe Sepi

私は同じ問題を実験してきましたが、しばらくいじってみたところ、メインdiv内に相対位置の要素が含まれていると、IEがアコーディオンを開く」ことがわかりました。ぎくしゃくした」。これが私がやっていたことです...

<div id="accordion">

  <h3 class="oneLine">Asylum</h3>

  <div class="serviceBlockContent">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed augue a enim convallis facilisis. Aenean eu ullamcorper nulla. Ut id urna quis augue bibendum commodo et a quam.</p>
  </div>

</div>

H3要素の位置を相対に設定したため、IEで破損しました。これがお役に立てば幸いです。

0
user198538