Question

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

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

在点击链接时禁用折叠

1 个答案: