嵌套bootstrap 3.1.1折叠

Question

嗨，我不知道是否有人可以帮助。我正在使用Bootstrap 3.1.1并为sidenav使用嵌套折叠菜单。我想在打开的菜单中添加一个背景颜色（使用一个类），并在菜单关闭时删除背景颜色。

这工作正常，但是当我有嵌套的菜单我正在使用的代码删除父项的背景颜色关闭子菜单时，我不能解决如何只删除背景颜色，如果它顶级菜单关闭。所以如果它是一个子菜单，当关闭子菜单时不应该删除背景色。

$(".nav-sidenav > li").on("show.bs.collapse", function() { 
    $(this).addClass("sidenav-active-background"); 
}); 
$(".nav-sidenav > li").on("hide.bs.collapse", function() { 
    $(this).removeClass("sidenav-active-background"); 
}); 

请参阅JSFiddle

Answer 1

首先，你需要删除 '>' N隐藏。这将使其涵盖导航中的所有列表项。然后，您需要将“e”添加到回调函数中。最后添加e.stopPropagation（） 以保持事件中的父元素不被触发并移除该类。

去从

$(".nav-sidenav > li").on("hide.bs.collapse", function() { 
    $(this).removeClass("sidenav-active-background"); 
}); 

要

$(".nav-sidenav li").on("hide.bs.collapse", function (e) { 
    e.stopPropagation(); 
    $(this).removeClass("sidenav-active-background"); 
}); 

http://jsfiddle.net/clurect/TF2Tg/1/

一些提示：我会用hidden.bs.collapse的视觉美感。您也可以进行检查以确保事件触发的列表项。