Bootstrap框架中的下拉菜單組件，其下拉菜單項默認是隱藏的，如下所示：

因為“dropdown-menu”默認樣式設置了“display:none”，其詳細源碼請查看bootstrap.css文件第3010行～第3029行：

.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”又會被移除。我們可以通過瀏覽器的firebug查看整個過程：

默認情況：

用戶第一次點擊：

用戶再次點擊：

在bootstrap.css文件第3076行～第3078行，我們可以很容易發現：

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