jquery - 单击下拉菜单时打开所有子菜单

Question

我有一个包含多个子菜单的菜单，当我单击打开其中一个子菜单时，所有子菜单都会打开。如何只打开点击的子菜单？

我知道这个问题已经被问过好几次了，但我不知道如何解决我的问题。

HTML:

<ul id="menu-main-top-menu">
  <li class="menu-item menu-item-has-children"><a href="#">Top Item with Sub Items</a>
<ul class="sub-menu">
  <li class="menu-item"><a href="#">Sub Item</a></li>
  <li class="menu-item"><a href="#">Sub Item</a></li>
  <li class="menu-item"><a href="#">Sub Item</a></li>
  <li class="menu-item"><a href="#">Sub Item</a></li>
  <li class="menu-item"><a href="#">Sub Item</a></li>

</ul>
</li>
<li class="menu-item menu-item-has-children"><a href="#">Top Item with Sub Items</a>
<ul class="sub-menu">
    <li class="menu-item"><a href="#">Sub Item</a></li>
    <li class="menu-item"><a href="#">Sub Item</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Top Item</a></li>
<li class="menu-item"><a href="#">Top Item</a></li>
<li class="menu-item"><a href="#">Top Item</a></li>
<li class="menu-item menu-item-has-children"><a href="#">Top Item with Sub Items</a>
<ul class="sub-menu">
    <li class="menu-item"><a href="#">Sub Item</a></li>
    <li class="menu-item"><a href="#">Sub Item</a></li>
</ul>
</li>
<li class="menu-item"><a href="#">Top Item </a></li>
</ul>

CSS:

.sub-menu {
    display: none;
    width: 250px;
    padding: 20px;
    background: #f1f1f1;
}

Jquery:

  $('.menu-item-has-children').on('click', function(e) {
    e.preventDefault();
    if (!$(this).hasClass('active')) {
        $('.sub-menu').slideDown(100);
        $('.menu-item-has-children').toggleClass('active');
        $(this).addClass('active');
    }
      else{
        $('.sub-menu').slideUp(100);
        $('.menu-item-has-children').toggleClass('active');
      }
  });

代码可以在 codepen 上找到

https://codepen.io/anon/pen/eXQNLo

Answer 1

使用这个$(this).children('.sub-menu').slideDown(100);而不是$('.sub-menu').slideDown(100 );

$('.menu-item-has-children').on('click', function(e) {
    e.preventDefault();
    if (!$(this).hasClass('active')) {
        $(this).children('.sub-menu').slideDown(100);
        $('.menu-item-has-children').toggleClass('active');
        $(this).addClass('active');
    }
      else{
        $('.sub-menu').slideUp(100);
        $('.menu-item-has-children').toggleClass('active');
      }
  });

Check this your updated codepen