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>
此jQuery代码将使在加载页面时显示下拉列表，如下所示，下拉列表的内容将可见。
$(document).ready(function(){
$('.myDropdownHandle').dropdown('toggle');
});
因此，如果您不希望在页面加载时切换下拉列表，请删除这段代码。但是，如果删除数据属性，则下拉列表的行为将不是一个属性。
参考此W3School链接将为您进一步阐明。下面是一个示例，其中显示了下拉切换的实际操作。
如果您在此处阅读本节的底部
无论您是通过 JavaScript 调用下拉列表还是改用 data-api，data-toggle="dropdown" 始终需要出现在下拉列表的触发器元素上。
此行所做的一切，它决定是否要自动打开菜单。
$(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>