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

Question

アップデート

私がこれをコミュニティ wiki にしているのは、次の 3 つの理由からです。

明確な答えが得られた気がしませんが、
私は自分のアコーディオン関数を巻いたので、私は長い間答えを必要としなくなりました
この質問には多くの意見が寄せられているため、多くの人がまだ興味を持っていることは明らかです

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

jQuery のアコーディオン UI 要素を使用してページに取り組んでいます。この例に基づいて HTML をモデル化しましたが、<li>要素内に順序付けされていないリンクのリストがいくつかあります。このような：

  $(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 の問題ではないことはわかっています。

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

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

別の方法はありますか？

score 21 · Accepted Answer

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

最終結果は、html ドキュメントの doc タイプを持たないことになりました (一部の開発者はそれを削除しました)。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 Mode の動作専用のサイト全体が実際にあります。Quirks Modeに関する記事はこちらでご覧いただけます。トラブルシューティングに関するもう少し詳しい情報を掲載した投稿を書きました。

score 6 · Accepted Answer

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

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

score 5 · Accepted Answer

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

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 */ });        
});

score 2 · Accepted Answer

同じ問題が発生しましたが、IE 6 および 7 で修正されました。

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

とにかく滑りが良く見えると思います...

score 2 · Accepted Answer

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

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

score 1 · Accepted Answer

アンカータグを SPAN タグに変更します。私は同じ問題を経験していましたが、うまくいきました。同じことが DIV タグにも当てはまります。それらが何らかの理由でアコーディオンにあると、IE がトリップします。位置: アブソリュートも IE を怖がらせるかもしれません。参考までに

score 1 · Accepted Answer

私は実際にセバスチャンの反対を見つけました - 私はぎくしゃくしたアニメーションを引き起こしていた内部コンテンツ DIV に最小の高さを持っていました。私はそれらを脱いで、物事は改善しました。しかし、これがautoheightとどのように相互作用するかはわかりません-構文によると、私のものは「false」に設定されていますが、私のアコーディオンは間違いなくそれを無視しているようです...

score 1 · Accepted Answer

1

私はJQuery 1.4を使用していますが、

<!DOCTYPE html>

IE6、ChromeでもOKです。

于 2010-04-03T07:33:01.110 に答える

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

IE7に入れるmin-heightと問題が解決したことがわかります。

score 0 · Accepted Answer

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

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

これの代わりに：

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

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

score 0 · Accepted Answer

アコーディオンのデフォルトの HTML 構造を使用していない IE6 および IE7 のアコーディオンで同様の問題が発生しました。奇妙なことに、アコーディオン要素の水平方向のサイズを特定のピクセル数に固定すると、アコーディオンアニメーションの問題が解消されました。なんで？知らない。しかし、問題は autoHeight: true の使用に固有のものであり、アコーディオン要素の高さがリセットされると仮定したアニメーションの最後に問題が発生したことがわかりました。そして、IE が計算できないことは誰もが知っています。

score 0 · Accepted Answer

私は同じ問題を実験してきましたが、しばらくいじり回した後、メインの 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で壊れました。これが役に立てば幸いです。

score 0 · Accepted Answer

同様の問題があり、doctypes を見ることを提案している人が何人かいます。実際の jQuery UI サイトを表示しようとしたところ、デモアコーディオンが ie6 で問題なく動作し、私のコードに問題があることが示唆されました (私にとってはより多くの調査作業)。しかし、jquery.UI サイトの doctype が単に<!DOCTYPE html>

score 0 · Accepted Answer

0

「autoHeight: false」を「autoHeight: true」に変更するだけです。

于 2009-03-29T08:36:50.927 に答える

score 0 · Accepted Answer

0

オプションでは、次を設定する必要があります。

 navigation: true

于 2008-12-01T22:38:43.213 に答える

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

アップデート

問題: IE アニメーションが悪臭を放つ

16 に答える 16

Related

Reference