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

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

在下面的代码，这被认为是“通过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>

来源

2017-06-12 Diego Burela

你的问题到底是什么？正如您所引用的，您可以通过js调用或数据属性初始化下拉列表。请清除您的代码示例 – lordrhodos

这个jQuery代码将让这个在页面的加载，你的下拉列表中会展示，如，在下拉列表中的内容将是可见的。

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

因此，如果您不希望页面加载时切换下拉菜单，请删除这段代码。但是，如果您删除数据属性，则您的下拉菜单不会像一个行为一样。

参考这个W3School Link将进一步澄清你。 Here是一个显示下拉切换操作的示例。

来源

2017-06-12 21:56:03

因此，我们从不需要直接使用JavaScript来触发使用引导时的下拉菜单？这有帮助。我的印象是，这段代码是为了在点击锚时触发下拉菜单。 –

正确，除非您有其他要触发打开或关闭下拉菜单的元素，否则您可以忽略此代码。我假设这段代码只是一个例子，它向你展示了如何使用引导api手动打开和关闭下拉菜单。 –

如果你读了部分的底部，无论您通过JavaScript调用你的下拉菜单或改用数据API，数据切换=“下拉菜单”的here

总是必须存在于下拉的触发元素。

来源

2017-06-12 21:57:22 alexhuang

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

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

来源

2017-06-12 22:56:34 kblau

@Diego Burela Govind和我都做了我们自己的工作回答你的问题。请注意两者，所以其他人会回答他们的问题 – kblau

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

回答

相关问题