在單親下拉班中打開2個引導程序下拉列表，但有2個不同的下拉菜單

我在單親下拉班級下有2個下拉菜單項。但是，當我點擊下拉動作1，然後它顯示下拉菜單2項的主體。在單親下拉班中打開2個引導程序下拉列表，但有2個不同的下拉菜單

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script> 
</head> 
<body> 

<div class="container"> 
    <h2>Dropdown Example</h2> 
    <p>The <strong>toggle</strong> method toggles the dropdown.</p> 

    <div class="dropdown"> 

    <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example 1 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>  
    </ul> 
    <br> 
    <br> 

    <button class="btn btn-primary dropdown-toggle" id="menu2" type="button" data-toggle="dropdown">Dropdown Example 2 
    <span class="caret"></span></button> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu2"> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li> 
     <li role="presentation" class="divider"></li> 
     <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>  
    </ul> 
    </div><br> 
    <p><strong>Note:</strong> For dropdowns, you should always include the data-toggle="dropdown" attribute. Do not rely solely on the toggle method, as it may not work as expected in all browsers.</p> 
</div> 

<script> 
$(document).ready(function(){ 
    $(".dropdown-toggle").dropdown("toggle"); 
}); 
</script> 

</body> 
</html>

這裏是小提琴鏈接：https://jsfiddle.net/ajay1008/jumpgkfc/

所以我要打開他們的各自的主體下拉菜單。

來源

2017-04-03 Ajay.R1008

你爲什麼不只是有兩個'dropdown'的div？ – ajeferson

不，我希望它像上面提到的那樣，對於我的真實應用程序我有一個不同的場景，這只是我想要的演示。 –

我不認爲你可以在一個'dropdown'div下有兩個不同的下拉菜單。但是，您實際上可以創建子下拉菜單。 – ajeferson

您必須將每個下拉按鈕包裝到另一個.btn組中。

<div class="btn-group"> <button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown" open'">Dropdown Example 1 
<span class="caret"></span></button>...</div>

mycode的（你可以複製該代碼）： https://jsfiddle.net/rezajafari2a/c1yw3hbv/

來源

2017-04-03 10:29:45

是的，它幫助，謝謝:) –

在單親下拉班中打開2個引導程序下拉列表，但有2個不同的下拉菜單

回答

相關問題