带引导程序的多个下拉菜单不起作用？
Posted
技术标签:
【中文标题】带引导程序的多个下拉菜单不起作用？【英文标题】：Multiple dropdown menu with bootstrap is not working? 【发布时间】：2018-01-25 18:33:17 【问题描述】：我有这个 html 代码：
<html><head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<ul id="menu" class="nav navbar-nav collapse navbar-collapse">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
MAIN
</a>
<ul class="dropdown-menu">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
Dropdown Menu 1
</a>
<ul class="dropdown-menu">
<li>
<a>Sub submenu</a>
</li>
</ul>
</li>
<li>
<a>B</a>
</li>
</ul>
</li>
</ul>
</body></html>
问题是当我下拉“主”菜单时，我看到有一个“下拉菜单 1”....但是如果我关闭主下拉菜单...我在开发人员工具上看到它公开课添加到第二个下拉菜单，但第一个失去了公开课......可能是什么问题？感谢您的帮助！
【问题讨论】：
您能否提供更多信息，您到底想要什么？ 我没有看到“子子菜单”下拉菜单... 我认为 Plunker 将有助于更多地了解您的问题 【参考方案1】：看看： https://jsfiddle.net/26fy9yxm/
JAVASCRIPT：
$(document).ready(function()
$('.dropdown-submenu a.test').on("click", function(e)
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
);
CSS：
.dropdown-submenu
position: relative;
.dropdown-submenu .dropdown-menu
top: 0;
left: 100%;
margin-top: -1px;
HTML：
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Main <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="test" tabindex="-1" href="#">Dropdown Menu 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Submenu1</a></li>
<li><a tabindex="-1" href="#">Submenu2</a></li>
</ul>
</li>
<li><a href="#">B</a></li>
</ul>
</div>
外部代码：
https://code.jquery.com/jquery-3.2.1.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
【讨论】：
【参考方案2】：您可以使用专为多级下拉菜单设计的 Bootstrap 组件。
组件依赖：
需要 jQuery、Bootsrap 3.x CSS 和 JavaScript 文件。如果要使用动画，取决于 Bootstrap Dropdown 组件和 animate.css。
引导兼容性：
Dropdownhover 与 Bootstrap 的原生 Dropdown 组件完全兼容。它们两个可以应用于同一个项目，提供悬停和点击事件支持。在小型设备上，悬停事件被忽略。
查看此链接Bootstrap dropdown hover
【讨论】：
【参考方案3】：$(document).ready(function()
$('.dropdown-submenu a.linkbtn').on("click", function(e)
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
);
$(document).click(function()
$(".dropdown-submenu").hide();
);
);
【讨论】：
你应该解释一下你的答案以上是关于带引导程序的多个下拉菜单不起作用？的主要内容，如果未能解决你的问题，请参考以下文章