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

我目前正在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有什么意义呢？

最佳答案

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

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

如果您只需要带有下拉菜单所有默认行为的pur HTML，请继续执行1，如果您还需要其他内容，您会发现经常需要添加一些JavaScript并自己控制对象的生命。

关于javascript - 创建带有和不带有JavaScript的Bootstrap下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37318388/