Bootstrap 嵌套导航栏 - 控制“活动”类

Question

我几乎有一个嵌套的 Bootstrap 菜单可以完全按照我的意愿工作。

菜单分为两个级别。顶部是主要菜单类别，底部是子类别。选择一个主菜单将激活该菜单标题并打开相应的子类别，此时没有选择子类别。当用户选择一个子类别[例如，他们选择下面的 About 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

更新。我完全重写了脚本并添加了一个小的 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>