響應式前端框架Bootstrap系列（6）下拉列選單
阿新 • • 發佈：2019-01-01
下拉列選單，是以列表格式顯示連結的上下文選單。下拉列選單選擇後，是開啟超連結的新頁面，此處要清楚與上篇中選擇框的區別。下拉列選單可以單獨使用，但更多的配合導航欄使用。下面是下拉列選單用到的幾種樣式：
.dropdown：指定下拉選單整體樣式，下拉選單都包裹在 .dropdown 裡，與之相反的是.dropup
.dropdown-toggle：指下拉列點選按鈕樣式，按鈕內常含<span class="caret"></span>尖角符號
.dropdown-menu：指建立下拉選單，為ul元素；其中其子元素格式為<li><a></a></li>
.dropdown-header：下拉選單中新增標題，為li元素
.divider：下拉選單中的分割線，為li元素
.disabled：下拉選單中的禁用項，為li元素
演示程式碼：
效果圖：<body> <div class="container"> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-globe"></span> 技術文件 <span class="caret"></span> </button> <ul class="dropdown-menu" style="margin: 0px;"> <li class="dropdown-header">搜尋引擎</li> <li> <a href="https://www.baidu.com" target="_blank">百度</a> </li> <li> <a href="#">谷歌</a> </li> <li class="disabled"> <a href="#">我被禁用了，不可點選</a> </li> <li class="divider"></li> <li class="dropdown-header">前端框架</li> <li> <a href="#">Bootstrap</a> </li> </ul> </div> </div> </body> <script> $(".dropdown").click(function(e) { var target = e.target; if($(target).attr("data-toggle") != undefined) { e.preventDefault(); e.stopPropagation(); } }); $('.dropdown').mouseover(function() { $(this).addClass('open'); }).mouseout(function() { $(this).removeClass('open'); }); </script>
（注）.glyphicon表示字型圖示。
（注）下拉選單切換有一個簡單的方法用來顯示或隱藏下拉選單，如$(".dropdown-toggle").dropdown('toggle')。
當下拉列選單除了單獨使用外，在實際還會配合導航欄一起使用時，此時它的結構通常如下：
<ul> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-globe"></span> 中國站 <span class="caret"></span> </a> <ul class="dropdown-menu> <li> <a>中國站</a> </li> <li> <a>International - English</a> </li> <li> <a>繁體中文</a> </li> <li> <a>日本サイト</a> </li> </ul> </li> <li></li> <li></li> </ul>