Question

Bootstrap的网站告诉我们，

通过数据属性或JavaScript，下拉插件通过切换父列表项上的.open类来切换隐藏内容（下拉菜单）。

在下面的代码中，它被认为是“通过JavaScript”，有以下脚本：

<script type="text/javascript">
$(document).ready(function(){
    $('.myDropdownHandle').dropdown('toggle');
});

我的印象是，如果我们想要通过Javascript切换，那么下拉列表将需要这个代码块，但是我可以删除该块，并且下拉列表仍然可以通过数据属性工作，但如果我擦除数据属性，下拉列表根本不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <div class="dropdown" id="myDropdown">
         <a class="myDropdownHandle" data-toggle="dropdown" data-target="#" href="#">
            Dropdown <span  class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a  href="#">Link 1</a></li>
            <li><a  href="#">Link 2</a></li>
            <li><a  href="#">Link 3</a></li>
            <li><a  href="#">Link 4</a></li>
        </ul>
    </div>

  </body>
</html>

Answer 1

这个jQuery代码将使得在加载页面时，您的下拉列表将显示，如下所示，下拉列表的内容将可见。

$(document).ready(function(){
    $('.myDropdownHandle').dropdown('toggle');
});

因此，如果您不希望在页面加载时切换下拉列表，请删除此段代码。但是，如果删除数据属性，则您的下拉列表将不会表现为一个。

参考此W3School Link将为您进一步澄清。 Here是一个示例，显示了操作中的下拉切换。

Answer 2

如果您阅读here

部分的底部

无论您是通过JavaScript调用下拉列表还是使用data-api，都需要在下拉列表的触发元素上显示data-toggle =“dropdown”。

Answer 3

所有这一行都可以决定是否要自动打开菜单。

$(document).ready(function () {
        $('.dropdown-menu').dropdown('toggle');

<div class="dropdown">
    <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
    </button>
    <div class="dropdown-menu" aria-labelledby="dLabel">
        <ul>

Bootstrap的JavaScript下拉菜单 - 数据属性行为

3 个答案: