菜單切換不起作用時使用不（這）

我正在建立一個基本的下拉菜單，當你點擊一個菜單項，我想確保任何打開的下拉菜單首先關閉。菜單切換不起作用時使用不（這）

在第二行使用not（this），允許toggleClass打開但關閉。

我錯過了什麼？

$('.nav-dropdown').click(function(){ 
    $('.nav-dropdown-content').not(this).addClass('hide'); 
    $('.nav-dropdown-content', this).toggleClass('hide'); 
});

這裏的HTML

<div class="nav_wrapper"> 
    <ul> 
    <li class="nav-dropdown"> 
     Menu Item 1 <span>&dtrif;</span> 
     <div class="nav-dropdown-content"> 
     <a href="#">Sub Menu 1</a> 
     <a href="#">Sub Menu 2</a> 
     </div> 
    </li> 
    <li class="nav-dropdown"> 
     Menu Item 2 <span>&dtrif;</span> 
     <div class="nav-dropdown-content"> 
     <a href="#">Sub Menu 3</a> 
     <a href="#">Sub Menu 4</a> 
     </div> 
    </li> 
    </ul> 
</div>

來源

2016-10-12 ok1ha

無法你只需把它們全部關掉，然後轉動那個回來了嗎？ '$（'.nav-dropdown-content'）。addClass（'hide'）; $（'。nav-dropdown-content'，this）.removeClass（'hide'）;' – Shanimal

請顯示相關的html結構。「this'不是你想要它的 – charlietfl

甚至addClass（'hide'）而不是（this）似乎打破了切換 – ok1ha

請嘗試以下

$('.nav-dropdown').click(function(){ 
    var $content = $('.nav-dropdown-content', this).toggleClass('hide'); 
    // exclude the current content instance 
    $('.nav-dropdown-content').not($content).addClass('hide');  
});

this是$('.nav-dropdown')元素，所以你不能用它作爲not()爲$('.nav-dropdown-content')

來源

2016-10-12 19:21:29 charlietfl

完美無缺，謝謝！ – ok1ha

你也可以使用'$（this）.siblings（）。find（'。nav-dropdown-content'）'爲其他的 – charlietfl

菜單切換不起作用時使用不（這）

回答

相關問題