嵌套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的視覺美感。您也可以進行檢查以確保事件觸發的列表項。