【问题标题】: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 来获得视觉美感。您还可以检查以确保事件触发的列表项。

    【讨论】: