Bootstrap响应式前端框架笔记十七——下拉列表交互

<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>

$('#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("下拉框已经展示");
});