嵌套引导程序 3.1.1 折叠答案

【问题标题】：Nested bootstrap 3.1.1 collapse嵌套引导程序 3.1.1 折叠
【发布时间】：2014-03-26 12:42:42
【问题描述】：

您好，我想知道是否有人可以提供帮助。我正在使用 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

【问题讨论】：

标签： jquery html css twitter-bootstrap twitter-bootstrap-3

【解决方案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 来获得视觉美感。您还可以检查以确保事件触发的列表项。

【讨论】：