隐藏/显示子菜单

Hide/Show sub menu

本文关键字：菜单 显示 隐藏      更新时间：2023-09-26

我想使用jQuery来隐藏/显示子菜单。

所以最初'Projects'将只可见。当点击时，它会显示子菜单。

我已经附上了我当前的HTML代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-primary-menu-container">
    <ul id="menu-primary-menu" class="menu">
        <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a>
<ul>
	<li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a></li>
	<li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a></li>
</ul>
</li>
    </ul>
</div>

下面是我的演示:http://jsfiddle.net/76Lr33ap/

可以将 click() 事件处理程序绑定到a 

$('#menu-primary-menu>li>a').click(function() {
  $(this).next().toggle();
  // if there is any other element after a the  use
  // $(this).parent().find('ul').toggle();
  // also if you need any better effect then use
  // slideToggle() or fadeToggle instead of toggle()
});
#menu-primary-menu>li>ul {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="menu-primary-menu-container">
  <ul id="menu-primary-menu" class="menu">
    <li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-27"><a href="#">Projects</a>
      <ul>
        <li id="menu-item-26" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-26"><a href="/category/projects/residential/">Residential</a>
        </li>
        <li id="menu-item-24" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-24"><a href="/category/projects/private/">Private</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

相关文章：