我有2个问题。首先是,当用户单击链接(对我们说)时,整个菜单将关闭。这是糟糕的UX。我希望它保持打开状态,因为它已经打开了。
第二个问题是用户一旦打开就不能关闭活动的主菜单(例如术语,专用或子主菜单)。我们如何解决这两个问题?
JSFiddle演示:https://jsfiddle.net/edvh0nsk/
HTML:
<div class="container">
<div class="row">
<div class="col">
<ul class="nav police mod-list">
<li class="item-103 deeper parent"><span class="nav-header "><img class="float-right" src="/images/arrow-down.png" /><span class="image-title">Terms</span></span>
<ul class="nav-child unstyled small" style="display: none;">
<li class="item-106"><a href="/">About Us</a></li>
</ul>
</li>
<li class="item-107 active deeper parent"><span class="nav-header "><img class="float-right" src="/images/arrow-down.png" /><span class="image-title">Private</span></span>
<ul class="nav-child unstyled small" style="display: none;">
<li class="item-104"><a href="/">Privacy</a></li>
<li class="item-105 current active"><a href="/">FAQ</a></li>
<li class="item-108 deeper parent"><span class="nav-header ">Sub Main</span>
<ul class="nav-child unstyled small" style="display: none;">
<li class="item-109"><a href="/">Child</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
CSS:
.police .active .nav-child {
display: block !important;
}
.police .active.parent .nav-header{
font-weight: 600;
}
.police .parent {
display: block;
width: 100%;
cursor: pointer;
padding: 7px 0;
}
.police .nav-child {
padding-left: 15px;
font-size: 14px;
}
.police .nav-child li {
list-style: none;
padding: 7px 0;
}
.police .parent span img {
width: 24px;
}
.police .parent.arrow span img {
-ms-transform: rotate(180deg); /* IE 9 */
-webkit-transform: rotate(180deg); /* Safari 3-8 */
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
jQuery的
jQuery('.police .nav-child').hide();
jQuery('.police .parent').click(function(e) {
e.stopPropagation();
jQuery(this).children('ul').slideToggle();
jQuery(this).toggleClass("arrow");
});
最佳答案
https://jsfiddle.net/70Lkw3an/
您需要在这里摆脱!important
:
.police .active .nav-child {
display: block !important;
}
这样
.slideToggle
实际上可以将其关闭。然后,您需要防止单击链接传播到父级,以免其关闭菜单:jQuery('a').click(function(e) {
e.stopPropagation();
})
为了防止最初隐藏活动的活动对象,请执行以下操作:
jQuery('.police .nav-child:not(.active > .nav-child)').hide();