4

トップナビゲーションバーがあり、そのアイテムのいくつかはドロップダウン/スライドダウンをトリガーします。

私の問題は、アイテム、または実際にはドロップダウン内の任意の領域をクリックするたびに、ドロップダウンが折りたたまれるということです。

私が助けを必要としているのは、子要素がクリックされたときにドロップダウンが折りたたまれないようにする方法を見つけることです（または、ドロップダウン内の偶発的なクリックを考慮したいので、ドロップダウン領域内のどこでも、実際にはクリックされていません子要素）。

これが私が持っている基本的なHTML構造です：

<ul class="dropdown">
 <li><a href="#" class="noclick nojs">Select your Topic</a>
  <ul class="nojs" >
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
 </li>
</ul>

私のJavaScript：

$('.dropdown li').click(function() {
  //Hide all other drop downs that are visible, and remove the class 'selected'
  $(this).siblings('.selected').removeClass('selected').find('ul:visible').slideUp('fast');

  //Show/Hide dropdowns
  $(this).toggleClass('selected');
  $('ul:first', this).stop(true, true).slideToggle('fast');
});

これがデモです

どんな助けでも大歓迎です。

ありがとう。

4

4 に答える 4

7

それらの子要素でevent.stopPropagation()を停止して、イベントが li にバブルアップしないようにします 

$('ul.nojs *').click(function(e){
   e.stopPropagation(); 
});​

http://jsfiddle.net/DEFK9/

于 2012-11-12T20:18:19.727 に答える
1

デモ—タグの代わりにタグに.click()イベントを添付します。<a><li>

$('.dropdown .noclick').click(function(e) {
    // Do stuff.
});
于 2012-11-12T20:20:52.430 に答える
0

どうぞ！

フィドル

$('.dropdown').children('li').click(function() {

    //Show clicked dropdown and add 'selected' class
    $(this).addClass('selected').find('ul').slideToggle('fast');

    //Hide all other dropdowns and remove 'selected' class
    $('.dropdown').children('li').not(this).removeClass('selected').find('ul').slideUp('fast');

});
于 2012-11-12T20:40:04.333 に答える
0

以下のスニペットを使用して、slideToggle() を slideDown() に変更するだけです。

http://jsfiddle.net/yrzRu/

if ($(this).not('.selected')) {
        $('ul:first', this).stop(true, true).slideDown('fast');
        $(this).addClass('selected');
    }
于 2012-11-12T20:24:51.260 に答える