Jquery 只针对点击类的父类而不是其他类？

Question

我希望我的菜单元素在单击子按钮时显示子菜单。但我在其他菜单元素上也有相同的 html 和类。因此，当我按下一个按钮时，它会打开所有子菜单并关闭打开的子菜单。

我想让它工作，这样当我点击一个按钮时，只有他的 parent 子菜单在点击时打开和关闭。

<ul>
  <li class="menu-item current-menu-item">
    <a href="">Menu1</a>
    <button>click</button>
       <ul class="submenu">
        <li>asdasd</li>
      </ul>
  </li>
  <li class="menu-item">
    <a href="">Menu2</a>
    <button>click</button>
       <ul class="submenu">
        <li>asdasd</li>
      </ul>
  </li>
    <li class="menu-item">
    <a href="">Menu3</a>
    <button>click</button>
      <ul class="submenu">
        <li>asdasd</li>
      </ul>
  </li>
</ul>

.submenu {
  display: none;
}
.current-menu-item .submenu {
  display: block;
}

$(".menu-item button").click(function(){
  $(".menu-item button").parent('.menu-item').toggleClass("current-menu-item");
});

http://codepen.io/rKaiser/pen/QKgQVQ

谢谢。

Answer 1

$(".menu-item button").click(function(){
  $(this).parent('.menu-item').toggleClass("current-menu-item");
});

否则 jQuery 选择器会找到所有带有 .menu-item 按钮类的元素