在单个父下拉类中打开 2 个引导下拉列表，但有 2 个不同的下拉列表
Posted
技术标签:
【中文标题】在单个父下拉类中打开 2 个引导下拉列表，但有 2 个不同的下拉列表【英文标题】：Open 2 bootstrap dropdown within single parent dropdown class but 2 different dropdowns 【发布时间】：2017-08-28 03:31:38 【问题描述】：我在单父下拉类下有 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/
所以我想打开他们各自的正文下拉菜单。
【问题讨论】：
你为什么不干脆有两个dropdown div？
不，我想要上面提到的，我的实际应用程序有不同的场景，这只是我想要的演示。
我认为您不能在一个 dropdowndiv 下拥有两个不同的下拉菜单。但是，您实际上可以创建子下拉菜单。
【参考方案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/
【讨论】：
是的，有帮助，谢谢 :)以上是关于在单个父下拉类中打开 2 个引导下拉列表，但有 2 个不同的下拉列表的主要内容，如果未能解决你的问题，请参考以下文章