子菜单仅在单击该菜单项时出现

Question

我已经研究了一段时间，但我不确定如何定位它。

当我有一个顶级菜单项有下拉菜单的菜单时，我可以编写 CSS/JS 以便在单击按钮时显示下拉菜单。但是，当您单击其中一个按钮时，它会打开所有下拉菜单。

我如何专门定位，以便当您单击菜单按钮时，它只打开该特定按钮的子菜单。

<li id="Menu-item-2135" class="menu-item">Menu 1
<ul class="sub-menu">
  <li>list item 1</li>
  <li>list item 2</li>
</ul></li>

//The JS
$('#menu-item-2135').click(function(){
    $('.sub-menu').toggleClass('active');
  });

//The CSS
.sub-menu {
  display:none;
  &.active {
   display:flex;
  }
}

我一直在使用菜单项 ID 来定位菜单项，并使用 toggleClass('active') 来显示/隐藏子菜单，但这意味着每当我向网站添加新菜单项时，一个子菜单，我必须为那个菜单 ID 编写 JS。只是想知道是否有办法对此进行调整，这样它就可以完成所有这些操作，而无需为每个菜单 ID 专门编写它。

Answer 1

我使用.find() 在点击的元素上查找子菜单，然后，如果您需要，如果您不需要，请在之前使用 $('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) 行关闭所有打开的子菜单 - 只需删除

$('.menu-item').each((index,element)=>{
  $(element).on('click', ()=>{
    $('.menu-item').each((i,e)=>{$(e).find('.sub-menu').removeClass('active')}) // if you need to close other sub-menu
    $(element).find('.sub-menu').toggleClass('active')
  })
})

.sub-menu {
  display:none;
  
}
.sub-menu.active {
   display:flex;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="menu-item">Menu 1
  <ul class="sub-menu">
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</li>
<li class="menu-item">Menu 2
  <ul class="sub-menu">
    <li>list item 1</li>
    <li>list item 2</li>
  </ul>
</li>