jqueryのナビゲーションバーslidetoggle問題

私はjqueryのにかなり新たなんだと今のところ、私はhtmlのメニューを切り替えてスライドさせる私のコードを持っています。私のコードをheresjqueryのナビゲーションバーslidetoggle問題

<script type="text/javascript"> 
$(document).ready(function() { 
    $('li').each(function(){ 
$('li.menuheader').hover(function(){ 
    $('ul.submenu').slideToggle('slow', function(){}) 
}); 
}); 

}); 
</script> 
</head> 
<body> 
<div id="navbar"> 
    <ul> 


    <li class="menuheader">test1 
     <ul class="submenu"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
     </ul> 
    </li> 


    <li class="menuheader">test2 
     <ul class="submenu"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
     </ul> 
    </li> 


    <li class="menuheader">test3 
     <ul class="submenu"> 
     <li>item 1</li> 
     <li>item 2</li> 
     <li>item 3</li> 
     <li>item 4</li> 
     </ul> 
    </li> 


    </ul> 
</div> 

</body> 
</html>

私のjqueryは、メニューヘッダーの上にマウスを移動するたびにドロップダウンします。私はdivのidを使用して別々のjqueryの関数を作成することなく、これらを区切る必要があります。誰かがこれを行う方法で私を助けることができますか？彼らはすべてのセレクタに一致するので

出典

2011-07-21 MrPink

あなたが正確に行うには何が必要ですかそれははっきりしていません？私に –

IDを使用できないのはなぜですか？これは、右について見えますが、私はそれを試してみたし、それが –

@heavymetalkid – MrPink

多分これは（n iが考えるslideToggleを使用する必要があります）あなたが探しているものです。ここ

$('ul.submenu').hide(); 
$('li').each(function() { 
    $('li.menuheader').hover(function() { 
     $(this).find('ul.submenu').show('slow') 
    }, function() { 
     $(this).find('ul.submenu').hide('slow') 
    }); 
});

フィドル：http://jsfiddle.net/DRjPF/

出典

2011-07-21 10:28:27

あなたのコードは、すべてのul.submenuを示しています。各liに適したものを見つけるために$(this).find('ul.submenu')を使用してください。

第2に、それぞれliの場合は、li.menuheaderごとにhoverハンドラをバインドします。それは不要です。

また、hoverはMouseEnterイベントとマウスアウトでトリガします。 mouseenterが、これはすべてのmenuheadersを選択します==>、

$(document).ready(function() { 
    $('li.menuheader').mouseenter(function() { 
     $('ul.submenu').not(this).slideUp('slow'); // hide all 
     $(this).find('ul.submenu').slideDown('slow'); // 
    }); 
});

http://jsfiddle.net/zRvLt/

出典

2011-07-21 10:25:34 pimvdb

$('li.menuheader')を十分です。 thisでフィルタリングしてください。

$(document).ready(function() { 
    $('li').each(function(){ 
     $(this).('menuheader').hover(function(){ 
      $(this).children('ul.submenu').slideToggle('slow', function(){ 
       .... 
      }) 
     }); 
    }); 
});

出典

2011-07-21 10:25:56

... IDを使用すると、私は各要素に対して別々の機能を必要とする意味しますので、そのための実行可能な解決策です。彼のために+1。 – MrPink

ピンクを動作していないようです、私は@Nicola Peluchettiが思いついたと思います –

jqueryのナビゲーションバーslidetoggle問題

答えて

関連する問題