Bootstrap 嵌套导航栏 - 控制 "active" class

Question

我几乎得到了一个嵌套的 Bootstrap 菜单，完全按照我的要求工作。

菜单分为两层。顶部是主要菜单类别，底部 sub-categories。选择主菜单将激活该菜单标题并打开相应的 sub-category，此时没有子类别 selected。当用户 select 是 sub-category [例如，他们 select 下面大约 2] 时，该菜单元素被 select 编辑。

我的问题是，当用户执行此操作时，主要类别元素是 de-selected，而我不希望它是。

我有 JQuery 代码，我认为我可以使用它来完全控制添加和删除活动 class，但是 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

更新。我完全重写了脚本并添加了一个小CSS。

当用户选择子类别时，主要类别元素失去焦点，但不会失去活动 class。因此，您可以添加一个简单的 css-属性来将此活动元素着色为白色。
我注意到一个错误。父菜单的元素可能会得到.activeclass，但绝不会丢失
我更喜欢将 .active class 分配给 <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>

Bootstrap 嵌套导航栏 - 控制 "active" class

Bootstrap Nested Navbars - control over "active" class

css

jquery

navbar

twitter-bootstrap-3