Bootstrap響應式前端框架筆記十七——下拉列表交互

Bootstrap響應式前端框架筆記十七——下拉列表交互

    爲dropdown-toggle類添加data-toggle="dropdown"屬性能夠實現其下拉列表功能的綁定，示例以下：

<div class="dropdown col-md-2" id="drop">
	<button class="btn dropdown-toggle btn-primary" data-toggle="dropdown">
   		下拉列表
   	    <span class="caret"></span>
  	</button>
	<ul class="dropdown-menu">
		<li>
			<a>金牛座</a>
		</li>
		<li>
			<a>摩羯座</a>
		</li>
		<li>
			<a>獅子座</a>
		</li>
		<li>
			<a>白羊座</a>
		</li>
	</ul>
</div>

點擊此按鈕後，能夠自動實現下拉列表的顯示或隱藏。

    Bootstrap中的下拉列表控件也定義了一些方法回調，其會在drop-menu的父標籤上進行綁定，示例以下：

$('#myDropMenu').on('show.bs.dropdown',function(){
	console.log("下拉框將要展現");
});
$('#myDropMenu').on('shown.bs.dropdown',function(){
	console.log("下拉框已經展現");
});
$('#myDropMenu').on('hide.bs.dropdown',function(){
	console.log("下拉框將要隱藏");
});
$('#myDropMenu').on('hidden.bs.dropdown',function(){
	console.log("下拉框已經展現");
});

   另外，本篇博客中全部的實例代碼及顯示效果，在以下地址中，須要的能夠自行對照學習。

http://zyhshao.github.io/bootStrapDemo/dropdownJS.html。

前端學習新人，有志同道合的朋友，歡迎交流與指導，QQ羣:541458536