在单个父下拉类中打开2个引导下拉列表，但有两个不同的下拉列表-Java 学习之路

我在单亲下拉课程下有2个下拉菜单项 . 但是当我点击下拉动作1时，它会显示下拉菜单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/

所以我想打开他们各自的身体下拉菜单 .

1 回答

你必须在另一个.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/

回复于 2024-04-16T19:32:16+08:00

在单个父下拉类中打开2个引导下拉列表，但有两个不同的下拉列表

1 回答

相关问题