创建带有和不带有JavaScript的Bootstrap下拉菜单

Create Bootstrap dropdown menu with and without JavaScript

本文关键字：Bootstrap 下拉菜单 创建 JavaScript      更新时间：2023-09-26

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

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

  1. 使用数据属性
  2. 使用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还是数据api调用下拉列表，下拉列表的触发器元素仍然需要datatoggle="dropdown"。

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

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

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

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

相关文章：