html - 如何将辅助导航栏添加到引导导航栏

Question

我的网站上有以下引导导航栏。

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">Mi Thai Resturant</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">About us</a></li>
         <li><a href="#">other locations</a></li>
      </ul>
   </div>
</nav>

我想要做的是，当用户单击其他位置时，我希望下面出现另一个水平栏，其中包含包含其他位置的链接。实现这一目标的最佳方法是什么？

Answer 1

您可以使用一点 jQuery 来显示/隐藏 onclick 子导航。

工作示例:http://www.bootply.com/iiVhh1BAGm

HTML

<nav class="navbar navbar-inverse" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">Mi Thai Resturant</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="#">About us</a></li>
         <li><a href="#" class="subnav-trigger">other locations</a></li>
      </ul>
   </div>
</nav>

<nav id="subnav" class="navbar navbar-default" role="navigation">
      <ul class="nav navbar-nav">
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
</nav>

jQuery

$( ".subnav-trigger" ).click(function() {
  $( "#subnav" ).toggle();
});

CSS

#subnav {
 display:none; 
}