带子菜单的Bootstrap 3导航

Question

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

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

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

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

对于CSS来说，它有点分散，因为我编辑了bootstrap.css文件。如果您需要在CSS中找到任何具体内容，并且不能让我知道。子菜单的CSS全部位于代码的底部。

现在我的问题是当我点击一个应该打开子菜单的链接（作业信息＆gt;签收）时，整个下拉菜单会关闭。

如果检查元素，您可以看到.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) {

Answer 2

只需在您的css中添加以下代码即可。这适用于悬停....

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}