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