文章目錄

• 下拉框
• 下拉分隔線
• 選單標題
• 選單項狀態

下拉框

1.引入js

 	@*1、Jquery元件引用*@
    <script src="~/Scripts/jquery-1.10.2.js"></script>

    @*2、bootstrap元件引用*@
    <script src="~/Content/bootstrap/bootstrap.js"></script>
    <link href="~/Content/bootstrap/bootstrap.css" rel="stylesheet" />
 

官網上的示例：

<div class="dropdown"> 
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉選單
		<span class="caret"></span> 
	</button> 
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
		</li>
   		…   
		<li role="presentation" class="divider"></li> 
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
		</li> 
	</ul>
</div>
 

詳解：

1、使用一個名為dropdown的容器包裹了整個下拉選單元素

<div class="dropdown"></div>

2、使用了<button>按鈕作為父選單，並且定義類名dropdown-toggle和自定義data-toggle屬性，且值必須和最外容器類名一致

data-toggle="dropdown"

3、下拉選單項使用了一個ul列表，並且定義一個類名為dropdown-menu

<ul class="dropdown-menu"></ul>

bootstrap中的下拉選單項預設是隱藏的,dropdown-menu設定了display：none

.dropdown-menu {
  position: absolute;/*設定絕對定位，相對於父元素div.dropdown*/
  top: 100%;/*讓下拉選單項在父選單項底部，如果父元素不設定相對定位，該元素相對於body元素*/
  left: 0;
  z-index: 1000;/*讓下拉選單項不被其他元素遮蓋住*/
  display: none;/*預設隱藏下拉選單項*/
  float: left;
  min-width : 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
}

當用戶點選父級選單時，下拉選單會顯示出來，再次點選時下拉選單將繼續隱藏

詳解：
通過js給父級容器div.dropdown新增或一處open來控制下拉選單顯示或隱藏，也就是說，預設情況，div.dropdown沒有類名open，當用戶第一次點選時，div.dropdown會新增類名open，當用戶再次點選時，div.dropdown容器中的類名會被移除

 .open > .dropdown-menu { display: block; }

下拉分隔線

假設下拉選單有兩個組，那麼組與組之間可以通過新增一個空的<li>,並且給這個li新增類名.dividerl來實現新增下拉分隔線的功能

.dropdown-menu .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5; 
}

選單標題

為了讓這個分組更明顯，還可以給每個組新增一個頭部標題。

<div class="dropdown"> 
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">下拉選單
	  <span class="caret"></span> 
	</button> 
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
		<li role="presentation"class="dropdown-header">第一部分選單頭部</li>
	 	<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
		</li>
		…
		<li role="presentation" class="divider"></li> 
		<li role="presentation" class="dropdown-header">第二部分選單頭部</li>
	 	…
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
		</li> 
	</ul> 
</div>

css樣式：

.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: 12px;
  line-height: 1.42857143;
  color: #999; 
}

bootstrap框架中下拉選單預設是左對齊，如果要下拉選單相對於父級容器右對齊，可以在dropdown-menu上新增一個類.dropdown-menu-right，注意，從v3.1.0版本開始，不再建議對下拉選單使用.pull-right類

<div class="dropdown"> 
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 	 下拉選單 
	<span class="caret"></span> 
	</button> 
	<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
  	 …
  	</ul> 
</div>

css樣式：

.dropdown-menu-right {
  right: 0;
  left: auto;
}
.dropdown{float: left; }

選單項狀態

下拉選單的預設狀態有懸浮狀態：hover和焦點狀態：focus

.dropdown-menu > li > a:hover, 
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
 }

下拉選單還有當前狀態和禁用狀態，這兩種狀態使用方法只需要在對應的選單項上新增對應的類名

<div class="dropdown"> 
	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
 	 下拉選單   
	<span class="caret"></span> 
	</button> 
	<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> 
		<li role="presentation"class="active">
			<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
		</li>
		….  
		<li role="presentation" class="disabled">
			<a role="menuitem" tabindex="-1" href="#">下拉選單項</a>
		</li>
	</ul> 
</div>

CSS:

.dropdown-menu > 
.active > a, 
.dropdown-menu > 
.active > a:hover, 
.dropdown-menu > 
.active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #428bca;
  outline: 0; 
}

.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 
{
  color: #999; 
}

.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus 
{
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
}