文章/答案/技术大牛

发布

社区首页 >问答首页 >引导JavaScript下拉菜单-数据属性行为

问引导JavaScript下拉菜单-数据属性行为
EN

Stack Overflow用户

提问于 2017-06-12 21:50:54

回答 3查看 523关注 0票数 0

的网站告诉我们，

通过数据属性或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>

javascript

jquery

twitter-bootstrap

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-06-12 21:56:03

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

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

因此，如果不想在页面加载时切换下拉菜单，那么删除这段代码。但是，如果删除数据属性，则下拉列表将不作为数据属性。

参考此W3School链路将为您进一步澄清。这里是一个示例，它显示了下拉切换的动作。

票数 0

Stack Overflow用户

发布于 2017-06-12 21:57:22

如果您阅读了这里部分的底部

无论您是通过JavaScript调用下拉列表还是使用data，数据切换=“下拉列表”总是需要出现在下拉列表的触发器元素上。

票数 0

Stack Overflow用户

发布于 2017-06-12 22:56:34

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

$(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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44509262

复制

相似问题

问引导JavaScript下拉菜单-数据属性行为
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导JavaScript下拉菜单-数据属性行为EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导JavaScript下拉菜单-数据属性行为
EN