Bootstrap Вложенные Navbars - контроль над «активным» классом

Question

У меня почти есть вложенное меню Bootstrap, работающее именно так, как я хочу.

меню на двух уровнях. В верхней части находятся основные категории меню, нижние подкатегории. Выбор основного меню приведет к тому, что этот заголовок меню активен и откроет соответствующую подкатегорию, при этом в данный момент не будет выбрана подкатегория. Когда пользователь выбирает подкатегорию [например, они выбирают О 2 ниже], тогда этот элемент меню выбран.

Моя проблема заключается в том, что когда пользователь делает это, элемент основной категории отменяется, и я не хочу, чтобы это было.

У меня есть код JQuery, который, я думаю, я могу использовать для управления полностью добавлением и удалением активного класса, однако Bootstrap, кажется, делает эту форму мне.

См. Мой fiddle..

//get parent click menu 
 
$('.parentMenu li a').click(function() { 
 

 
    //compute the tag for the elment that was selected 
 
    sel = $(this)[0].toString(); 
 
    lgt = sel.length; 
 
    tag = sel.substring(lgt - 3,lgt); 
 

 
    tt = $(".childMenu").removeClass("show"); 
 
    $(this).addClass('active'); 
 

 
    var subMenu = $(tag + "S"); 
 
    subMenu.addClass("show"); 
 

 
}) 
 

 
$('.parentMenu').click(function() { 
 
    //$(".nav").find(".active").removeClass("active"); 
 
})

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 

 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Multi-Layer Menu</a> 
 
     <ul class="nav navbar-nav pull-left"> 
 
     <li class="active"><a href="#T1">Home</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse parentMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#T1">Sub Menu 1</a></li> 
 
     <li><a href="#T2">Sub Menu 2</a></li> 
 
     <li><a href="#T3">Sub Menu 3</a></li> 
 
     <li><a href="#T4">Sub Menu 4</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T1S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 1</a></li> 
 
     <li><a href="#about">About 1</a></li> 
 
     <li><a href="#contact">Contact 1</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T2S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 2</a></li> 
 
     <li><a href="#about">About 2</a></li> 
 
     <li><a href="#contact">Contact 2</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T3S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 3</a></li> 
 
     <li><a href="#about">About 3</a></li> 
 
     <li><a href="#contact">Contact 3</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T4S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 4</a></li> 
 
     <li><a href="#about">About 4</a></li> 
 
     <li><a href="#contact">Contact 4</a></li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div>

Answer 1

UPDATE. Я полностью переписал скрипт и добавил небольшой CSS.

1. Когда пользователь выбирает подкатегорию, элемент основной категории теряет фокус, но не активный класс. Таким образом, вы можете добавить одно простое свойство css, чтобы покрасить этот активный элемент в белый цвет.

2. Я заметил ошибку. Элемент родительского меню может получить класс .active, но никогда не теряет его.

3. Я предпочитаю присвоить класс .active знаку <li> вместо <a>.

Пожалуйста, проверьте результат: https://jsfiddle.net/glebkema/kz93pmvo/

// get parent click menu 
 
$('.parentMenu li a').click(function() { 
 

 
    // compute the tag for the element that was selected 
 
    tag = $(this).attr('href') + 'S'; 
 

 
    // show the child menu 
 
    selectChildMenu = $(tag); 
 
    if(!selectChildMenu.hasClass('show')){ 
 
    $('.childMenu.show').removeClass('show'); 
 
    selectChildMenu.addClass('show'); 
 
    } 
 

 
    // add the `active` class to the element of the parent menu 
 
    if (!$(this).parent().hasClass('active')){ 
 
    $('.parentMenu .active').removeClass('active'); 
 
    $('.navbar-header .active').removeClass('active'); 
 
    $(this).parent().addClass('active'); 
 
    } 
 
    
 
})

@import url('https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css'); 
 

 
.navbar-header .active, 
 
.parentMenu .active { 
 
color: white !important; 
 
}

<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="container"> 
 

 
    <div class="navbar-header"> 
 
     <a class="navbar-brand" href="#">Multi-Layer Menu</a> 
 
     <ul class="nav navbar-nav pull-left"> 
 
     <li><a class="active" href="#T1">Home</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div class="collapse navbar-collapse parentMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#T1">Sub Menu 1</a></li> 
 
     <li><a href="#T2">Sub Menu 2</a></li> 
 
     <li><a href="#T3">Sub Menu 3</a></li> 
 
     <li><a href="#T4">Sub Menu 4</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T1S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 1</a></li> 
 
     <li><a href="#about">About 1</a></li> 
 
     <li><a href="#contact">Contact 1</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T2S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 2</a></li> 
 
     <li><a href="#about">About 2</a></li> 
 
     <li><a href="#contact">Contact 2</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T3S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 3</a></li> 
 
     <li><a href="#about">About 3</a></li> 
 
     <li><a href="#contact">Contact 3</a></li> 
 
     </ul> 
 
    </div> 
 

 
    <div id="T4S" class="collapse childMenu"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home 4</a></li> 
 
     <li><a href="#about">About 4</a></li> 
 
     <li><a href="#contact">Contact 4</a></li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>