Question

我目前正在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>

然后教程说：

数据切换=＆＃34;下拉＆＃34;仍然需要下拉列表的触发元素，无论您是通过JavaScript还是数据API调用下拉列表。

所以我的问题是：如果还需要指定数据属性，使用方式2的重点是什么？

Answer 1

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

其次，通过使用jQuery，您可以控制何时实例化下拉列表以与其进行交互。例如，如您的链接所示，收听淹没的事件。

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

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

1 个答案: