时间戳

首页 > 解决方案 > 仅在单击该菜单项时出现子菜单

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

问题描述

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

当我有一个顶级菜单项有下拉菜单的菜单时，我可以编写 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 专门编写它。

标签： javascriptwordpress

解决方案

我使用.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>

推荐阅读