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

Question

我几乎有一个嵌套的Bootstrap菜单正如我想要的那样工作。

菜单分为两个级别。顶部是主要菜单类别，底部子类别。选择主菜单将使该菜单标题处于活动状态并打开相应的子类别，此时不选择子类别。当用户选择子类别[例如，他们选择下面的约2]时，则选择该菜单元素。

我的问题是当用户这样做时，主要的类别元素被取消选择，我不希望它。

我有JQuery代码，我认为我可以用它来控制完全添加和删除活动类，但Bootstrap似乎正在这样做我。

请参阅我的HERE。

<form method="post" enctype="multipart/form-data">
     <input type="file" name="image"></input>
     <input type="submit" name="submit" value="upload"></input>
</form>

//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");
})

Answer 1

<强>更新即可。我完全重写了脚本并添加了一个小CSS。

1. 当用户选择子类别时，主要类别元素将失去焦点，但不会失去活动类。因此，您可以添加一个简单的css-property来为白色的活动元素着色。

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>