Bootstrap Nested Navbars - control over "active" class

Question

I have almost got a nested Bootstrap menu working exactly as I want it.

The menu is on two levels. The top are major menu categories, the bottom sub-categories. Selecting a major menu will turn that menu heading active and open up the appropriate sub-category, with no subcategory selected at this time. When the user selects a sub-category [for example, they select About 2 below] then that menu element is selected.

My problem is that when a user does this the major category element is de-selected and I do not want it to be.

I have JQuery code that I think I can use to control completely adding and removing the active class, however Bootstrap seems to be doing this form me.

Please see my 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. I completely rewrote the script and added a small CSS.

1. When the user selects a sub-category, the major category element loses the focus, but not the active class. So you can add one simple css-property to color this active element in white.

2. I noticed a bug. The element of the parent menu may to get the .active class, but never loses it.

3. I prefer to assign the .active class to the <li> tag instead of the <a>.

Please check the result: 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>