引導3 nav與子菜單

Question

我有一些問題試圖讓我的Bootstrap導航有一個子菜單。

我創建了這裏的jsfiddle：http://jsfiddle.net/ho6ggmge/

注：這是使用的jsfiddle我的第一次，所以我不知道如何將引導文件的資源，所以我只是複製所有的CSS和JS進入那裏的部分。

對於Javascript，我添加的所有東西都在代碼的最底部，其餘部分是bootstrap.js，我沒有碰到它。

對於CSS而言，由於我編輯了bootstrap.css文件相當多，所以它更分散一些。如果您需要在CSS中找到任何具體內容，並且無法讓我知道。子菜單的CSS全部位於代碼的底部。

現在我的問題是，當我點擊一個應該打開子菜單（Job Info> Signoffs）的鏈接時，整個下拉菜單關閉。

如果您檢查元素，則可以看到.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例如

結果是This jsFiddle這似乎正常工作的自定義CSS和JavaScript。所以我假設你的定製是造成這個問題的原因。

編輯：

尋找到它多一點後，你的問題是下面的代碼。您正在追蹤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;  
}