jquery - Bootstrap 3 带子菜单的导航

Question

我在尝试让我的 Bootstrap 导航具有子菜单时遇到了一些问题。

我在这里创建了一个 jsfiddle:http://jsfiddle.net/ho6ggmge/

注意:这是我第一次使用 JSfiddle，所以我不确定如何将 Bootstrap 文件包含到资源中，所以我只是将所有 CSS 和 JS 复制到那里的部分。

对于 Javascript，我添加的所有内容都在代码的最底部，其余的是 bootstrap.js，我没有接触过。

对于 CSS，它有点分散，因为我对 bootstrap.css 文件进行了相当多的编辑。如果您需要在 CSS 中找到任何特定内容，不能只告诉我。子菜单的 CSS 都在代码的底部。

现在我的问题是，当我单击一个应该打开子菜单的链接(工作信息 > 签核)时，整个下拉菜单都关闭了。

如果您检查元素，您可以看到 .open 类已添加到 Signoffs 链接，但它已从 Job Info 链接中删除。我需要它们同时打开。

我的代码来自于:http://www.bootply.com/97919并希望让我的工作与此非常相似。

非常感谢您提供的所有帮助!

编辑:我在你的版本中没有看到这个，但是当我把它从我的版本中取出时，下拉列表完全停止工作:

 $(document).ready(function(){
    $('.dropdown-toggle').dropdown()
});

Answer 1

你的 jsFiddle 太乱了，无法弄清楚发生了什么......所以这就是我所做的。

1. 使用 CDN 中包含的 Bootstrap 3.2 创建了一个新的 jsFiddle。
2. 从您的 jsFiddle 中包含您的 HTML。
3. 包括来自 bootply 示例的自定义 CSS 和 JavaScript

结果是This jsFiddle这似乎工作正常。所以我假设您的自定义是导致问题的原因。

编辑:

在进一步研究之后，您的问题是以下代码。您正在处理 ul.dropdown 而不是 ul.dropdown-menu。添加 -menu 似乎可以解决您的 jsFiddle 中的问题。

Bootply 示例。

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {

你的代码

$('ul.dropdown [data-toggle=dropdown]').on('click', function(event) {