2

サブメニューのスライドダウンを処理する次のスクリプトがあります。

$('#nav li #bottom').hover(function() {
    $(this).closest('#nav li').find('#sub_nav').slideDown("slow");
},
function() {
    $(this).closest('#nav li').find('#sub_nav').slideUp("slow");
});

スクリプトはこのように記述されているため、ユーザーがナビゲーションリストアイテム内のdivの1つ、つまり#bottomにカーソルを合わせたときにのみスライドダウンがトリガーされます。

私が抱えている問題は、スライドダウンは正常に機能しますが、ユーザーがサブメニューにカーソルを合わせるとメニューが上にスライドすることです。もちろん、マウス/カーソルが離れるまでサブメニューを上にスライドさせたくありませ#nav li #bottomん#sub_nav。

ここでjsfiddleを作成して、メニューの動作を確認できるようにしました。

NAVアイテムの構造のスクリーンショット

ここに画像の説明を入力してください

4

1 に答える 1

1

#sub_navbyをラップできますdiv#wrapper。この方法sub_menuは下の一部です: 

<div id="bottom">
    <a href="#">Menu Item 1</a>
    <ul id="sub_nav">
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
    </ul>
</div>

メソッドを使用することもできますstop()：

$('#nav li #bottom').hover(function() {
    $(this).find('#sub_nav').stop().slideDown("slow");
},
function() {
    $(this).find('#sub_nav').stop().slideUp("slow");
});

デモ

于 2012-07-14T12:32:42.167 に答える