引導的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下拉菜單 - 數據屬性行爲

回答

相關問題