单击其他项目时，引导子菜单项保持打开状态答案

【问题标题】：Bootstrap submenu items stay open when clicking on other item单击其他项目时，引导子菜单项保持打开状态
【发布时间】：2015-04-30 10:23:11
【问题描述】：

我有这段 Javascript：

<script type="text/javascript">
    jQuery(function(){
        jQuery(".dropdown-menu > li > a.trigger").on("click",function(e){
            var current=jQuery(this).next();
            var grandparent=jQuery(this).parent().parent();
            if(jQuery(this).hasClass('left-caret')||jQuery(this).hasClass('right-caret'))
                jQuery(this).toggleClass('right-caret left-caret');
            grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
            grandparent.find(".sub-menu:visible").not(current).hide();
            current.toggle();
            e.stopPropagation();
        });
        jQuery(".dropdown-menu > li > a:not(.trigger)").on("click",function(){
            var root=jQuery(this).closest('.dropdown');
            root.find('.left-caret').toggleClass('right-caret left-caret');
            root.find('.sub-menu:visible').hide();
        });
    });
    </script>

解决这个问题：

<li class="dropdown-submenu submenu">
    <a class="trigger right-caret">Category Name</a>
    <ul class="dropdown-menu submenu">
        <li>Subcategory</a></li>
    </ul>
</li>

这是示例代码 - 子类别 li 项目是在 foreach 循环中动态生成的。

现在的问题是，当我单击一个子菜单项时，它会很好地展开。然后，当我单击另一个子菜单项时，前一个子菜单项保持打开状态，新单击的项也会打开，依此类推。折叠的唯一方法是再次单击它们。看看上面的 javascript，当我展开一个新的子菜单项时，我错过了什么来折叠其他子菜单项？

这是一个示例：

【问题讨论】：

你能显示整个html吗？我的意思是您正在处理的 grandparent 项目（<li class="dropdown-submenu submenu"> 的父项）。
HTML 中的类名是 submenu，而脚本中的类名是 sub-menu。

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

改变

grandparent.find(".sub-menu:visible").not(current).hide();

到

grandparent.find("li .submenu:visible").not(current).hide();

它对我有用。这是一个工作中的 jsFiddle，大部分样式都被去掉了 - http://jsfiddle.net/3xz39smb/

【讨论】：