Bootstrap框架中的下拉菜單組件，其下拉菜單項(xiàng)默認(rèn)是隱藏的，如下所示：

因?yàn)?ldquo;dropdown-menu”默認(rèn)樣式設(shè)置了“display:none”，其詳細(xì)源碼請(qǐng)查看bootstrap.css文件第3010行～第3029行：

.dropdown-menu {
  position: absolute;/*設(shè)置絕對(duì)定位，相對(duì)于父元素div.dropdown*/
  top: 100%;/*讓下拉菜單項(xiàng)在父菜單項(xiàng)底部，如果父元素不設(shè)置相對(duì)定位，該元素相對(duì)于body元素*/
  left: 0;
  z-index: 1000;/*讓下拉菜單項(xiàng)不被其他元素遮蓋住*/
  display: none;/*默認(rèn)隱藏下拉菜單項(xiàng)*/
  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);
}

當(dāng)用戶點(diǎn)擊父菜單項(xiàng)時(shí)，下拉菜單將會(huì)被顯示出來(lái)，如下所示：

當(dāng)用戶再次點(diǎn)擊時(shí)，下拉菜單將繼續(xù)隱藏，如下所示：

原理分析：

現(xiàn)在我們來(lái)分析一下實(shí)現(xiàn)原理，非常簡(jiǎn)單，通過(guò)js技術(shù)手段，給父容器“div.dropdown”添加或移除類名“open”來(lái)控制下拉菜單顯示或隱藏。也就是說(shuō)，默認(rèn)情況，“div.dropdown”沒(méi)有類名“open”，當(dāng)用戶第一次點(diǎn)擊時(shí)，“div.dropdown”會(huì)添加類名“open”；當(dāng)用戶再次點(diǎn)擊時(shí)，“div.dropdown”容器中的類名“open”又會(huì)被移除。我們可以通過(guò)瀏覽器的firebug查看整個(gè)過(guò)程：

默認(rèn)情況：

用戶第一次點(diǎn)擊：

用戶再次點(diǎn)擊：

在bootstrap.css文件第3076行～第3078行，我們可以很容易發(fā)現(xiàn)：

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