如何解决单击同级项目时,关闭列表中项目的下拉菜单
我有一个带有多个级别的菜单。我想知道当我们单击同级的另一个菜单项(处于相同级别的项)时如何折叠一个活动菜单项。我实现了以下Jquery代码。但是它没有给出预期的输出。即使这是一个WordPress插件,该功能也无法从该插件获得。因此,任何帮助将不胜感激。
jQuery(document).ready(function(){
jQuery('.elementor-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();
}
});
});
.elementor-nav-menu a {
color: #ffffff;
}
.elementor-navigation .current-menu-item > a,.elementor-navigation .current-menu-ancestor > a {
font-weight: 700;
}
.elementor-navigation ul ul {
display: none;
}
.elementor-navigation ul li,.elementor-navigation ul ul li {
text-align: left;
}
.no-js .elementor-navigation ul ul {
display: block;
}
.elementor-navigation ul .eltoggled-on {
display: block;
}
.elementor-navigation .menu-item-has-children > a {
margin-right: 56px;
}
.eldropdown-toggle {
background-color: transparent;
border: 0;
border-radius: 0;
color: #1a1a1a;
content: "";
height: 48px;
padding: 0;
position: absolute;
right: 0;
text-transform: none;
top: 0;
width: 48px;
}
.eldropdown-toggle:after {
border: 0 solid #d1d1d1;
border-left-width: 1px;
content: "\f107";
font-family: FontAwesome;
font-size: 24px;
left: 1px;
position: relative;
width: 48px;
}
.eldropdown-toggle:focus {
outline: thin dotted;
outline-offset: -1px;
}
.eldropdown-toggle:focus:after {
border-color: transparent;
}
.eldropdown-toggle.eltoggled-on:after {
content: "\f106";
}
.elementor-menu-toggle {
font-size: 14px;
font-size: 1rem;
margin: 1.076923077em 0;
padding: 0.569230769em 0.769230769em;
clear: both;
}
.elementor-menu-toggle {
font-size: 24px;
font-size: 1.5rem;
}
.no-js .elementor-menu-toggle {
display: none;
}
.elementor-menu-toggle:focus {
outline: 0;
}
.elementor-menu-toggle.eltoggled-on:focus {
outline: thin dotted;
}
@media screen and (min-width: 48em) {
.elementor-menu-toggle {
font-size: 16px;
font-size: 1.0rem;
margin: 1.3125em 0;
padding: 0.8125em 0.875em 0.6875em;
}
}
@media screen and (min-width: 56.875em) {
.elementor-menu {
display: block;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.elementor-navigation {
margin: 0 -0.875em;
}
.elementor-navigation li {
display: inline-block;
}
.elementor-navigation a {
outline-offset: -8px;
padding: 1em;
white-space: nowrap;
}
.elementor-navigation ul ul {
display: block;
left: -999em;
margin: 0;
position: absolute;
z-index: 99999;
}
.elementor-navigation ul ul ul {
top: -1px;
}
.elementor-navigation ul ul ul:before,.elementor-navigation ul ul ul:after {
border: 0;
}
.elementor-navigation ul ul a {
white-space: normal;
width: 12.6875em;
}
.elementor-navigation li:hover > ul,.elementor-navigation li.focus > ul {
left: 0;
right: auto;
}
.elementor-navigation ul ul li:hover > ul,.elementor-navigation ul ul li.focus > ul {
left: 100%;
right: auto;
}
.elementor-navigation .menu-item-has-children > a {
margin: 0;
padding-right: 2.25em;
}
.elementor-navigation .menu-item-has-children > a:after {
content: "\f107";
font-family: FontAwesome;
position: absolute;
right: 0.625em;
top: 1.25em;
}
.elementor-navigation ul ul .menu-item-has-children > a {
padding-right: 2.0625em;
}
.elementor-navigation ul ul .menu-item-has-children > a:after {
right: 0.5625em;
top: 0.875em;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.elementor-align-left .elementor-navigation ul ul .menu-item-has-children > a:after {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.elementor-align-left .elementor-navigation li:hover > ul,.elementor-align-left .elementor-navigation li.focus > ul {
left: 0;
right: auto;
}
.elementor-align-left .elementor-navigation ul ul li:hover > ul,.elementor-align-left .elementor-navigation ul ul li.focus > ul {
left: 100%;
right: auto;
}
.elementor-align-right .elementor-navigation ul ul .menu-item-has-children > a:after {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.elementor-align-right .elementor-navigation li:hover > ul,.elementor-align-right .elementor-navigation li.focus > ul {
left: auto;
right: 0;
}
.elementor-align-right .elementor-navigation ul ul li:hover > ul,.elementor-align-right .elementor-navigation ul ul li.focus > ul {
left: auto;
right: 100%;
}
.eldropdown-toggle,.elementor-navigation ul .eldropdown-toggle.eltoggled-on,.elementor-menu-toggle {
display: none;
}
}
<ul id="menu-1" class="elementor-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 举报,一经查实,本站将立刻删除。