和模態(tài)彈出窗一樣，Bootstrap框架中的下拉菜單也支持JavaScript方法觸發(fā)下拉菜單顯示。使用JavaScript觸發(fā)下拉菜單和聲明式原理是基本類似的，不同的是使用JavaScript方法可以按照自己的方式省略一些元素或者樣式。同樣用一個簡單的示例來做演示：
<ul class="nav nav-pills">
<li class="dropdown">
<a href="##" class="dropdown-toggle" role="button" id="tutorial">教程<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="tutorial">
<li role="presentation"><a href="##">CSS3</a></li>
<li role="presentation"><a href="##">HTML5</a></li>
<li role="presentation"><a href="##">Sass</a></li>
</ul>
</li>
<li class="active"><a href="##">前端論壇</a></li>
<li><a href="##">關(guān)于我們</a></li>
</ul>
使用JavaScript調(diào)用dropdown()方法后，單擊激活按鈕，會彈出下拉菜單，再次單擊的時候會收起下拉菜單。
$(function(){
$(".dropdown-toggle").dropdown();
})
還可以使用參數(shù)“toggle”。當下拉菜單隱藏時，調(diào)用dropdown(“toggle”)方法可以顯示下拉菜單，反之，如果下拉菜單顯示時，調(diào)用dropdown(“toggle”)方法可以讓下拉菜單隱藏。
$(function(){
$(".dropdown-toggle").dropdown("toggle");
})
不過使用該參數(shù)，每次單擊都要兩次toggle，就會一直是一個不變的狀態(tài)。所以，一般情況下，使用示例中不帶參數(shù)的方法。就算你需要使用參數(shù)“toggle”，也建議使用jQuery的one方法：
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})
我來試試：用JavaScript的方法實現(xiàn)觸發(fā)導(dǎo)航條的“下拉菜單”
1、刪除右側(cè)的a標簽的data-toggle="dropdown"屬性
2、在任務(wù)區(qū)寫JavaScript代碼以觸發(fā)下接菜單的顯示和隱藏
不會怎么辦？請查看任務(wù)提示區(qū)。
參考代碼如下：
<script>
$(function(){
$(".dropdown-toggle").one("click",function(){
$(this).dropdown("toggle");
})
})
</script>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報