如何将辅助导航栏添加到自举导航栏中

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来显示/隐藏subnav 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; 
} 

Answer 2

我觉得我有一段代码，可以HEL你出去了。看看这个小提琴：http://jsfiddle.net/3zh4jxgh/。请在HTML部分肯定jQuery代码走在你的HTML文件的HEAD：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ui/1.8.18/jquery-ui.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#main-menu").hover(
     function() { 
     $("#submenu").animate({ 
     height: '+=102' /* add 51 to this number for each li class="text" in the submenu */ 
     }, '0' 
); 

    $(".text").css({"display": "block" 
     } 
    ); 


}, 

     function() { 
     $("#submenu").animate({ 
     height: '-=102', /* add 51 to this number for each li class="text" in the submenu */ 
     }, '0' 
); 

     $(".text").css({"display": "none" 
     } 
    ); 

    } 
    ); 

    }); 


</script> 

这是我的小提琴使用的HTML：

<div id="main-menu" onClick="menu()">MENU</div> 
<div id="submenu"> 

    <li class="text">A title</li> 
    <li class="text">Another title</li> 

</div> 

而CSS：

#main-menu { 
    width:100%; 
    height:50px; 
    color:white; 
    font-family:helvetica; 
    position:relative; 
    background-color:black; 
    text-align:center; 
    line-height:50px; 
    cursor:pointer; 
    font-weight:bold; 
    transition: 0.5s ease-in-out; 
    font-size:18pt; 
} 

#submenu { 
    position:relative; 
    width:100%; 
    height:0px; 
    background-color:grey; 
} 

.text { 
    position:relative; 
    display:block; 
    width:100%; 
    height:50px; 
    text-align:center; 
    line-height:50px; 
    font-family:helvetica; 
    display:none; 
    color:white; 
    transition: 0.5s ease-in-out; 
    font-size:16pt; 
    border-bottom:1px solid #434347; 
} 

小记：在小提琴中，我不得不将jQuery添加到HTML文件才能工作。