Question

我正在尝试整理使用click而不是hover的导航菜单来显示子菜单（或下拉列表）。

我已经设置但是它不太合适。我不知道如何在点击另一个子菜单时关闭当前打开的子菜单。

HTML：

<ul id="menu-primary-navigation" class="menu nav-main">

  <li class="nav-about"><a href="#">About us</a>
    <ul class="sub-menu" style="display: none; ">
      <li><a href="/what-we-do/">What we do</a></li>
      <li><a href="/why-we-do-it/">Why we do it</a></li>
    </ul>
  </li>

  <li class="nav-weare"><a href="#">Who we are</a>
    <ul class="sub-menu" style="display: none; ">
      <li><a href="/who-we-are/ambassadors/">Ambassadors</a></li>
      <li><a href="/who-we-are/trustees/">Trustees</a></li>
    </ul>
  </li>

  <li class="nav-involved"><a href="#">Get involved</a>
    <ul class="sub-menu" style="display: none; ">
      <li><a href="/get-involved/coach/">Become a coach</a></li>
      <li><a href="/get-involved/academy/">Become an academy</a></li>
    </ul>
  </li>

</ul>

目前要让每个子菜单显示和隐藏我使用这个jQuery：

$('#menu-primary-navigation li a').click(function(e) {
    e.preventDefault();
    $(this).next('.sub-menu').slideToggle('fast');
});

但问题是他们独立工作并且相互重叠（所有这些都可以立即打开）。

我需要一种方法来检测另一个关闭当前打开的子菜单的顶级链接的点击，并显示所点击链接的子菜单。

Answer 1

您可以选择sub-menu和visible项slideToggle。

这是fiddle

$('#menu-primary-navigation > li > a').click(function(e) {  // select only the child link and not all links, this prevents sub links from being selected. 
    var sub_menu = $(this).next('.sub-menu'); // store the current submenu to be toggled  
    e.preventDefault();
    $('.sub-menu:visible').not(sub_menu).slideToggle('fast'); // select all visible sub menus excluding the current one that was clicked on and close them 
    sub_menu.slideToggle('fast'); // toggle the current sub menu 
});

Answer 2

在您的子菜单上单击事件，您可以添加一个类'submenuopen'

$(this).addClass('submenuopen')

在父级单击事件上，查找包含该类的元素。删除该类并隐藏元素。

单击jQuery动画子菜单

2 个答案: