javascript - 单击链接时禁用折叠

Question

我有两个问题。第一个是当用户点击一个链接(Say About Us)时，整个菜单关闭。这是一个糟糕的用户体验。我希望它保持开放状态，因为它已经开放了。

第二个问题是用户一旦打开就无法关闭事件的主菜单(例如 Terms、Private 或 Sub Main)。我们如何解决这两个问题？

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");
});

Answer 1

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();