Bootstrap - 2个导航栏活动状态答案

【问题标题】：Bootstrap - 2 navbars active stateBootstrap - 2个导航栏活动状态
【发布时间】：2015-11-24 11:00:21
【问题描述】：

我在同一页面中有两个水平导航栏。一个是主导航栏，顶部固定。第二个控制自定义手风琴并放置在其顶部（不固定）。

除了辅助导航栏的按钮处于活动状态之外，一切正常。

JS：

<script>
  $("#nav1 a").on("click", function(){
   $("#nav1").find(".active").removeClass("active");
   $(this).parent().addClass("active");   
  });    
  $("#nav2 a").on("click", function(){
   $("#nav2").find(".active").removeClass("active");
   $(this).parent().addClass("active");
  });
</script>

正如我告诉你的，“nav1”活动状态工作正常。问题是“nav2”。

Fiddle

【问题讨论】：

将您的代码放在 jsfiddle 上，或者至少提供您正在使用的 HTML。

标签： jquery twitter-bootstrap navbar

【解决方案1】：

也许是这样的？

$('.collapse').on('shown.bs.collapse', function (e) {
  $('.collapse').not(this).removeClass('in');
});

$('[data-toggle=collapse]').click(function (e) {
  $('[data-toggle=collapse]').parent('li').removeClass('active');
  $(this).parent('li').toggleClass('active');
});

.navbar {
	margin-bottom:-1px;
    border-radius:0;
}

#submenu {
    background-color: #e7e7e7;
    margin-bottom:20px;
}

.collapsing {
	display:none;
}

<div class="container">
  <nav class="navbar navbar-default" role="navigation" id="topmenu">
    <ul class="nav navbar-nav">
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#one">One</a>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#two">Two</a>
      </li>
      <li class="dropdown">
        <a href="#" data-toggle="collapse" data-target="#three">Three</a>
      </li>
    </ul>
  </nav>
</div>
<div class="container">
  <nav class="navbar navbar-default" role="navigation" id="submenu">
    <ul class="nav navbar-nav collapse" id="one">
      <li><a href="#" id="">One sub 1</a></li>
      <li><a href="#" id="">One sub 2</a></li>
      <li><a href="#" id="">One sub 3</a></li>
      <li><a href="#" id="">One sub 4</a></li>
    </ul>
    <ul class="nav navbar-nav collapse" id="two">
      <li><a href="#" id="">Two sub 1</a></li>
      <li><a href="#" id="">Two sub 2</a></li>
      <li><a href="#" id="">Two sub 3</a></li>
    </ul>
     <ul class="nav navbar-nav collapse" id="three">
      <li><a href="#" id="">Three sub 1</a></li>
      <li><a href="#" id="">Three sub 2</a></li>
    </ul>
  </nav>
</div>

【讨论】：