3

IE9+、Chrome、および Firefox でうまく機能する jQuery onclick メニューがあります。ただし、IE8では開くのが非常に遅くなります。メニューが表示されるまでに約 10 秒かかり、アニメーションは再生されず、メニューのみが表示されます。

メニューは最新バージョンの jQuery (v1.10.2) を使用し、スライドとアニメーションのみを使用して、メニューのさまざまな部分を開閉します。遅いjQuery、遅い読み込みメニュー、IE8とjQueryの遅いアニメーションのさまざまな組み合わせをグーグルで検索してみましたが、私が抱えている問題のようなものをリモートで見つけることさえできません。

ここにある私のウェブサイトにアクセスすると、問題を確認できます。IE8 でアクセスすると、テスト カテゴリ 1 または 2 をクリックすると速度が非常に遅いことがわかります。

誰もこの種の問題に遭遇したことがありますか? 何が原因で、それを正常に動作させるための解決策を知っている人はいますか?

編集

メニューだけでなく、カルーセルにも影響していることに気付きました。アニメーションを見ると、どちらもスライドしていませんが、IE9 + ではスライドします。この 2 つがリンクされているかどうかはわかりませんが、影響を受けているのが両方の jQuery 効果であることは奇妙に思えます。

編集 2

さらにテストを行った結果、メニューの下部がカルーセルの下のタブの上にある場合、タブの上にある場合は、タブの上のビットがすぐに表示されることに気付きました。メニューを閉じても同じです。タブにカーソルを合わせると、そこに描かれたメニューの一部が消えます。

次に、カルーセルが変わるとメニューが表示されたり消えたりするのを見て気づきました。再描画の問題のようですが、完了時に描画しようとしているコードが機能していないようです。これは、ここで別の回答から取得したコードです(以下の回答のおかげで、jQuery 要素で動作するように少し変更されています)。

function FlushThis(id){
   var msie = 'Microsoft Internet Explorer';
   var tmp = 0;
   //var elementOnShow = document.getElementById(id);
   var elementOnShow = $(id);
   if(navigator.appName == msie) {
      tmp = elementOnShow.parentNode.offsetTop  +  'px';
   } else {
      tmp = elementOnShow.offsetTop;
   }
}

再描画する正しい関数を見つけるか、正しい要素でその関数を実行する場合であると思います。現在、クリックされた要素でそれを実行していますが、これは正しい要素ではない可能性があります。メインUL、クリックされた要素、開かれた要素、開かれた要素の親など、さまざまな要素でその関数を実行しようとしました。それらのどれにも運がありません。

JSFiddle:ここで要求されているのは、問題の JSFiddle ですが、IE10でも機能しません。Chromeで問題なく動作します。

編集3：

必要最小限のもの以外はすべて取り除いて、テスト ファイルに入れました。こちらの私のウェブサイトで見ることができます。IE コンソールでも他のコンソールでもエラーは発生しません。メニューが描画されないという同じ問題がまだ発生しています。ただし、その背後に再描画を強制するカルーセルがないため、このテスト サイトには表示されません。

これまでに試した再描画スクリプトはすべて失敗しました。どうすればこれを機能させることができますか?

4

4 に答える 4

1

これが関係しているかどうかはわかりませんが、それらのメニューをクリックするたびにエラーが発生することに気付きました。

Uncaught TypeError: Cannot read property 'offsetTop' of null

「FlushThis」関数 (jquery.fluid-menu.js から) で発生しますが、これは明らかに IE をサポートするためのある種のハックです。コードを見ると、要素の「offsetTop」プロパティを読み取ろうとして、結果を単純に破棄しています。おそらくこれは、メニューが開かれるとページを再描画/再レイアウトするネイティブコードを実行させるための IE のトリックでしょうか? 要素の ID ではなく、jquery 化された要素 ($this) がその関数に渡されているように見えます。そのコードを適切に実行して、問題が解決するかどうかを確認してみてください。

于 2013-07-19T15:30:09.910 に答える
0

ここで JQuery セレクターではなく「document.getElementById」を使用している特定の理由はありますか? 見つからずdocument.getElementById(id)、この行にエラーがスローされています: tmp = elementOnShow.parentNode.offsetTop + 'px';:

function FlushThis(id){
    var msie = 'Microsoft Internet Explorer';
    var tmp = 0;
    var elementOnShow = document.getElementById(id);
    if(navigator.appName == msie) {
        tmp = elementOnShow.parentNode.offsetTop  +  'px';
    } else {
        tmp = elementOnShow.offsetTop;
    }
}

たぶんに変更var elementOnShow = document.getElementById(id);しvar elementOnShow = $("#" + id);ますか？

また、IE の末尾に「px」を追加するのはなぜですか? それをコメントアウトしてみて、それtmp = elementOnShow.offsetTopが違いを生むかどうかを確認してください。

エラーはおそらく、そのページの残りの Javascript のほとんどを無効にしているだけです。

私が見つけたもう1つのこと：「slideUp」、「slideDown」、およびその他の「組み込み」アニメーションメソッドは、IEでバグがあったり、カリカリしているように見えることがあります（ほとんどの方法でアニメーション化した後、近くで1秒間停止するなど）アニメーションの終わり、突然点滅して最後まで）。

私はいつもanimate()すべてに JQuery 関数を使用しています。書くのは少し面倒ですが、パディングなどを考慮したouterHeight/outerWidth値を指定できます。関数を に置き換えてみて、animate()それが役立つかどうかを確認してください!

于 2013-07-19T16:46:29.797 に答える
0

アニメーションの再生中にスライドショーがメニューに重なることがあります。ie10 を ie8 モードに設定するだけで、レイヤーが表示に最適な順序で表示されないことがわかりました。

メニューで z-index を設定しようとしましたか? おそらく、カルーセルを一時的に非表示にして、メニューがうまく開くかどうかを確認してみてください。

于 2013-07-17T14:59:50.223 に答える