前言
閱讀之前您也可以到Bootstrap3.0入門學(xué)習(xí)系列導(dǎo)航中進(jìn)行查看 http://www.cnblogs.com/aehyok/p/3404867.html
本文主要來學(xué)習(xí)一下JavaScript插件--下拉菜單。
下拉菜單
? 通過此插件可以為幾乎所有東西添加下拉菜單，包括導(dǎo)航條、標(biāo)簽頁、膠囊式按鈕，本文主要來介紹下導(dǎo)航條里面的下拉菜單吧，其實(shí)道理都是一樣的。
用于導(dǎo)航條
先來看一下之前做過的一個簡單的導(dǎo)航條
導(dǎo)航條分為四個部分。第一部分導(dǎo)航頭，第二部分導(dǎo)航列，第三部分form查詢表單，第四部分導(dǎo)航列。
<nav
class
=
"
navbar navbar-default
"
role=
"
navigation
"
>
<div
class
=
"
navbar-header
"
>
<button type=
"
button
"
class
=
"
navbar-toggle
"
data-toggle=
"
collapse
"
data-target=
"
#myCollapse
"
>
<span
class
=
"
sr-only
"
>Toggle navigation</span>
<span
class
=
"
icon-bar
"
></span>
<span
class
=
"
icon-bar
"
></span>
<span
class
=
"
icon-bar
"
></span>
</button>
<a
class
=
"
navbar-brand
"
href=
"
#
"
>Brand</a>
</div>
<div
class
=
"
collapse navbar-collapse
"
id=
"
myCollapse
"
>
<ul
class
=
"
nav navbar-nav
"
>
<li
class
=
"
active
"
><a href=
"
#
"
>Link</a></li>
<li><a href=
"
#
"
>Link</a></li>
<li
class
=
"
dropdown
"
>
<a href=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle=
"
dropdown
"
>Dropdown <b
class
=
"
caret
"
></b></a>
<ul
class
=
"
dropdown-menu
"
>
<li><a href=
"
#
"
>Action</a></li>
<li><a href=
"
#
"
>Another action</a></li>
<li><a href=
"
#
"
>Something
else
here</a></li>
<li
class
=
"
divider
"
></li>
<li><a href=
"
#
"
>Separated link</a></li>
<li
class
=
"
divider
"
></li>
<li><a href=
"
#
"
>One more separated link</a></li>
</ul>
</li>
</ul>
<form
class
=
"
navbar-form navbar-left
"
role=
"
search
"
>
<div
class
=
"
form-group
"
>
<input type=
"
text
"
class
=
"
form-control
"
placeholder=
"
Search
"
>
</div>
<button type=
"
submit
"
class
=
"
btn btn-default
"
>Submit</button>
</form>
<ul
class
=
"
nav navbar-nav navbar-right
"
>
<li><a href=
"
#
"
>Link</a></li>
<li
class
=
"
dropdown
"
>
<a href=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle=
"
dropdown
"
>Dropdown <b
class
=
"
caret
"
></b></a>
<ul
class
=
"
dropdown-menu
"
>
<li><a href=
"
#
"
>Action</a></li>
<li><a href=
"
#
"
>Another action</a></li>
<li><a href=
"
#
"
>Something
else
here</a></li>
<li
class
=
"
divider
"
></li>
<li><a href=
"
#
"
>Separated link</a></li>
</ul>
</li>
</ul>
</div>
</nav>
用法一--通過data屬性
通過向鏈接或按鈕添加
data-toggle="dropdown"
可以打開或關(guān)閉下拉菜單。
<li
class
=
"
dropdown
"
>
<a href=
"
#
"
class
=
"
dropdown-toggle
"
data-toggle=
"
dropdown
"
>Dropdown <b
class
=
"
caret
"
></b></a>
<ul
class
=
"
dropdown-menu
"
>
<li><a href=
"
#
"
>Action</a></li>
<li><a href=
"
#
"
>Another action</a></li>
<li><a href=
"
#
"
>Something
else
here</a></li>
<li
class
=
"
divider
"
></li>
<li><a href=
"
#
"
>Separated link</a></li>
<li
class
=
"
divider
"
></li>
<li><a href=
"
#
"
>One more separated link</a></li>
</ul>
</li>
?即上面的那個小例子就是如此。
用法二--通過JavaScript
通過JavaScript打開或關(guān)閉下拉菜單：
?
通過將data-toggle屬性值設(shè)置為空，或者直接刪除data-toggle屬性，那么再次點(diǎn)擊就不會出現(xiàn)下來菜單了，接下來我們通過給這個a標(biāo)簽添加一個onclick事件。
<a href=
"
#
"
class
=
"
dropdown-toggle
"
id=
"
myDropDown
"
data-toggle=
""
onClick=
"
Test()
"
>Dropdown <b
class
=
"
caret
"
></b></a>
并添加相應(yīng)的JavaScript的函數(shù)代碼
<script type=
"
text/javascript
"
>
function Test()
{
$(
'
#myDropDown
'
).dropdown();
}
</script>
就這樣保存，然后F5刷新頁面重新點(diǎn)擊，就可以看到下拉菜單了（不過這里不太清楚為什么要點(diǎn)擊兩次下拉菜單才會出來）。
事件
可以綁定事件，然后在元素進(jìn)行相應(yīng)處理的時候會自動綁定到元素，并進(jìn)行執(zhí)行相關(guān)的代碼。
$(
'
#myDropdown
'
).on(
'
show.bs.dropdown
'
, function () {
//
在顯示的時候做一些處理代碼
})
總結(jié)
?看似很簡單的東西，有時候?qū)嵺`起來還是有難度的，多實(shí)踐肯定不會錯。
本文已更新至Bootstrap3.0入門學(xué)習(xí)系列導(dǎo)航 http://www.cnblogs.com/aehyok/p/3404867.html
有點(diǎn)累了，睡覺去也。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長非常感激您！手機(jī)微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
