1

css を使用してスライド機能を使用する代わりに、css を使用して表示/非表示から javascript/jquery に切り替えました。私のメニューはすべて水平で、垂直ではありません。スライドは技術的には機能しますが、子リンクの子から子に斜めに移動すると、完全に壊れます。たぶん私の論理は間違っていますか？Animateはクールでしたが、実際には左からスライドインしませんでした（リストのせいで、リストが上から下に始まり、上に移動し、左からスライドすると思います）、それを機能させる方法がない限り、動作するにはスライドが必要です。

フィドル

繰り返しますが、テスト サイトにアクセスして、実際に何が起こっているかを確認することをお勧めします。「uhoh」の子にドロップダウンさせ、子の 1 つにカーソルを合わせながら、斜めに「bam」に移動し、左に出て、プロジェクトに戻ります。それが台無しにならない場合は、ランダムにホバリングさせてください。出て、親を「プロジェクト」に戻すと、台無しになります。

私のテストサイト

4

2 に答える 2

0

問題は、複数の子ulの名前であるjqueryのクラスを呼び出すことでした。

// Add the 'hover' event listener to our drop down class 
$("#navbar li.has_children").hover(function() {
    // When the event is triggered, grab the current element 'this' and 
    // find it's children '.sub_navigation' and display/hide them
    //$(this).find("ul.sub_menu").first().animate({ width: "toggle" }, 100);
    $(this).find("ul.sub_menu").first().toggle("slide", {
        direction: "left"
    }, 200);
});

これには、別のホバー関数が必要であり、2番目の関数を#navbar li ul li.has_childrenに変更して、正しい関数に切り替えられるようにします。これでも問題が発生したので、トグルではなくホバーを使用して表示/非表示に切り替えたところ、正しく表示されるようになりました。

今、彼らがただ点滅をやめるなら....

psは、クラスではなく構造ごとに呼び出すために、jqueryで：has（）に切り替えました。オースティンに感謝します！

于 2012-07-08T00:55:42.877 に答える
0

このタイプのナビゲーションを何度も行った人からすると、クラス名やマークアップ内でこのような複雑さを感じる必要はありません。簡略化されたバージョンについては、このフィドルを見てください。

http://jsfiddle.net/fQsr9/

これは見た目がはるかに少なく、jQueryを使用した追跡と操作が容易になるはずです。

于 2012-07-07T02:42:55.377 に答える