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');
      }
  });

代码可在代码笔上找到

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

Answer 2

也许对我的代码有帮助：

点击菜单项中有孩子的孩子时，然后进行检查并执行“获取”操作，否则执行其他操作。

$('.menu-item-has-children > a').on('click', function(e) {
  e.preventDefault();
  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    $(this).siblings('.sub-menu').slideUp(300);
  }
  else{
      $('#menu-main-top-menu > li > a').removeClass('active');
      $('.menu-item-has-children .sub-menu').slideUp(300);
      $(this).next('.sub-menu').slideDown(300);
      $(this).addClass('active');
    }
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

当单击下拉菜单时，打开所有子菜单

2 个答案: