Question

我正在建立一个基本的下拉菜单，当您点击一个菜单项时，我想确保所有开放的下拉菜单先关闭。

在第二行使用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>

Answer 1

尝试以下

 $( '.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' )

使用not时菜单切换不起作用（this）

1 个答案: