如何將輔助導航欄添加到自舉導航欄中

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文件才能工作。