崩溃引导3多层子菜单&打开子菜单时更改活动状态

我在bootstrap 3中有一个下拉菜单，带有一个自定义子菜单。我试图添加与原始下拉菜单相同的行为。基本上是为了能够点击子菜单下拉菜单并关闭它，现在它只是打开但当你试图通过点击相同的链接关闭它它不做任何事情。

我已经尝试过用崩溃来做这个，但是我没有成功，我已经设置了一个js小提琴来展示我到目前为止所做的。

http://jsfiddle.net/29TYj/

这个。js代码允许我有多个下拉菜单而不添加自定义类，我一直试图修改这没有成功。

$('.dropdown-submenu').click(function(){
  $(this).children('.dropdown-menu').css('display','block');
  return false;
});

就像我说的，我试图在标记中使用折叠来做到这一点，但是没有成功。

我也在改变子菜单活动类(当你悬停在drop1上并移动到子菜单drop1应该是橙色bg上的白色文本)，但我无法找出嵌套类的正确顺序，如果有人能给我一个提示，以及

---

更新:

好了，我可以对子菜单做我需要做的事情通过将javascript更改为:

$(function(){
    $(".dropdown-menu > li > a.trigger").on("click",function(e){
        var current=$(this).next();
        current.toggle();
        e.stopPropagation();
    });
});

同时更改标记up中的子菜单链接以包含触发器类:

<a class="trigger">One Page Versions <span class="ion-ios7-arrow-right submenu-arrow"></span></a>

这是一个更新的小提琴:

http://jsfiddle.net/29TYj/2/

我仍然试图找到正确的活动类的子菜单，如果有人可以帮助。我对导航栏链接做了同样的事情，例如，我使用这个类来保持链接的高亮显示:

.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #ff7454 !important;
    color: #fff !important;
}

谁能告诉我正确的方向?

//toggles the .open class on the element to highlight it
$(".dropdown-submenu > a.trigger").on("click", function(e){
    var parent = $(this).parent('.dropdown-submenu');
    parent.toggleClass('open');
});
//Removes the added class .open if the user clicks on the main navigation to close it
$(".dropdown > a").on("click",function(e){
    $(".dropdown-submenu").removeClass('open');
});