如何解决单击另一个菜单或子菜单项时隐藏当前菜单,子菜单项
我有一个菜单,其中有3级子菜单。我想知道在单击任何其他菜单或子菜单时如何关闭菜单或子菜单。下面是我从另一个堆栈溢出问题中采取的Jquery,但我无法从该解决方案中实现预期的操作
jQuery(document).ready(function(){
jQuery('.nav-menu ul li a').click(function (e) {
// remove the active class with every click
var same = jQuery(this).hasClass('active');
var siblings = jQuery(this).parent('.menu-item').parent().children();
siblings.find('a.active + .sub-menu').slideUp();
siblings.find('a').removeClass('active');
if (jQuery(this).next().hasClass('sub-menu') && !same) {
e.preventDefault();
jQuery(this).addClass('active');
jQuery(this).next('.sub-menu').slideDown();
}
});
});
<ul id="menu-1" class="nav-menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-247">
<a href="#" class="item">Makeup</a>
<ul class="sub-menu nav-menu--dropdown">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-251">
<a href="#" class="sub-item">Complexion</a>
<ul class="sub-menu nav-menu--dropdown">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-261"><a href="#" class="sub-item">Concealer</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-264"><a href="#" class="sub-item">Foundation</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-260"><a href="#" class="sub-item">CC Cream</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-256">
<a href="#" class="sub-item">Palettes</a>
<ul class="sub-menu nav-menu--dropdown">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-320"><a href="#" class="sub-item">Complexion Palettes</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-321"><a href="#" class="sub-item">Eyeshadow Palettes</a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-247">
<a href="#" class="item">Perfume</a>
<ul class="sub-menu nav-menu--dropdown">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-251">
<a href="#" class="sub-item">Mens</a>
<ul class="sub-menu nav-menu--dropdown">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-261"><a href="#" class="sub-item">AXE</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-264"><a href="#" class="sub-item">DARK</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-260"><a href="#" class="sub-item">FOG</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-256">
<a href="#" class="sub-item">Ladies</a>
<ul class="sub-menu nav-menu--dropdown">
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-320"><a href="#" class="sub-item">FA</a></li>
<li class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-321"><a href="#" class="sub-item">Victoria Secret</a></li>
</ul>
</li>
</ul>
</li>
</ul>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。