javascript - 折叠 bootstrap 3 多级子菜单并在子菜单打开时更改事件状态

Question

我在 bootstrap 3 中有一个带有自定义子菜单的下拉菜单。我正在尝试添加与原始下拉列表相同的行为。基本上是为了能够单击子菜单下拉菜单并将其关闭，现在它只是打开，但是当您尝试通过单击相同的链接将其关闭时它不会执行任何操作。

我曾尝试通过崩溃来做到这一点，但没有成功，我已经设置了一个 js fiddle 来向您展示我目前拥有的东西。

http://jsfiddle.net/29TYj/

此 .js 代码允许我在不添加自定义类的情况下拥有多个下拉菜单，我一直试图修改它但没有成功。

$('.dropdown-submenu').click(function(){
  $(this).children('.dropdown-menu').css('display','block');
  return false;
});

就像我说的那样，我尝试在标记内使用折叠来做到这一点，但没有成功。

我也在努力改变子菜单事件类(当你将鼠标悬停在 drop 1 上并进入子菜单时，drop 1 应该是橙色 bg 上的白色文本)但是如果有人的话我无法弄清楚嵌套类的正确顺序也可以给我一些提示。

---

更新:

好的，我可以通过将我的 javascript 更改为:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        current.toggle();
        e.stopPropagation();
    });
});

同时更改标记中的子菜单链接以包含触发器类:

<a class="trigger">One Page Versions <span class="ion-ios7-arrow-right submenu-arrow"></span></a>

这是一个更新的 fiddle :

http://jsfiddle.net/29TYj/2/

如果有人可以提供帮助，我仍在尝试为子菜单找到正确的事件类。我对导航栏链接做了同样的事情，例如我使用这个类来保持链接突出显示:

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #ff7454 !important;
    color: #fff !important;
}

谁能指出我正确的方向。

Answer 1

有几种方法可以做到这一点，这里是一个简单的 jQuery 解决方案。只需将这段代码添加到您的脚本中:

//toggles the .open class on the element to highlight it
$(".dropdown-submenu > a.trigger").on("click", function(e){
    var parent = $(this).parent('.dropdown-submenu');
    parent.toggleClass('open');
});
//Removes the added class .open if the user clicks on the main navigation to close it
$(".dropdown > a").on("click",function(e){
    $(".dropdown-submenu").removeClass('open');
});

Updated Fiddle