Question

我在bootstrap 3中有一个下拉菜单，带有自定义子菜单。我试图添加与原始下拉列表相同的行为。基本上能够点击子菜单下拉列表并关闭它，现在它只是打开但是当你试图通过点击相同的链接关闭它时它不会做任何事情。

我试图通过崩溃来做到这一点，但我没有成功，我已经设置了一个js小提琴，告诉你我到目前为止。

这个.js代码允许我有多个下拉菜单而不添加自定义类，我一直试图修改它没有成功。

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

就像我说的那样，我尝试使用标记中的崩溃来做到这一点，但没有成功。

我也在努力改变子菜单活动类（当你将鼠标悬停在第1行并进入子菜单时，第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>

这是一个更新的小提琴：

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

折叠bootstrap 3多级子菜单＆amp;子菜单打开时更改活动状态

1 个答案: