使用和不使用 JavaScript 创建 Bootstrap 下拉菜单答案

【问题标题】：Create Bootstrap dropdown menu with and without JavaScript使用和不使用 JavaScript 创建 Bootstrap 下拉菜单
【发布时间】：2016-05-19 19:08:00
【问题描述】：

我目前正在 TutorialRepublic 学习这个 Bootstrap 3 教程：http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php

在该页面上，有两种方法可以创建下拉菜单：

使用数据属性
使用 JavaScript

方式 1 的标记：

<div class="bs-example">
   <div class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
        </ul>
    </div>
</div>

方式 2 的标记：

<script type="text/javascript">
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});  
</script>
<div class="bs-example">
   <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
        </ul>
    </div>
</div>

然后教程说：

无论您是通过 JavaScript 还是 data-api 调用下拉菜单，下拉菜单的触发元素仍需要 data-toggle="dropdown"。

所以我的问题是：如果仍然需要指定数据属性，那么使用方式 2 的意义何在？

【问题讨论】：

标签： javascript twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

首先：您可以通过编程方式添加切换属性。

其次，通过使用 jQuery，您可以控制何时实例化您的下拉列表以便与之交互。例如，要侦听来自下拉菜单的事件，如您的链接所示。

如果您只需要具有所有默认下拉行为的 pur HTML，请选择 1，如果您需要其他内容，您会发现您经常需要添加一些 javascript 并自己控制对象的生命。

【讨论】：