jquery - 嵌套 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

首先，您需要删除隐藏的“>”。这将使它覆盖导航中的所有列表项。然后你需要在回调函数中添加'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 来实现视觉美感。您还可以进行检查以确保事件触发了哪个列表项。