Menü toggle funktioniert nicht bei der Verwendung nicht (dieser)

Question

Ich bin ein grundlegendes Dropdown-Menü erstellen, und wenn Sie auf einen Menüpunkt klicken, möchte ich sicherstellen, dass alle geöffneten Dropdown-Menüs zuerst schließen.

Mit not (this) in der zweiten Zeile kann toggleClass aktiviert, aber deaktiviert werden.

Was fehlt mir?

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

Hier ist der 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> 

Answer 1

Versuchen Sie, die folgende

$('.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 das $('.nav-dropdown') Element ist, so dass Sie es nicht als not() für $('.nav-dropdown-content')