當我只需要打開一個下拉菜單時，JQuery下拉菜單打開多個下拉菜單

基本上，我有一個單獨工作的下拉菜單，當您單擊它打開的按鈕時，如果再次單擊它，它會關閉。現在，如果我要同時打開另一個，那麼我就有問題了，他們都是開放的。 enter image description here 當我只需要打開一個下拉菜單時，JQuery下拉菜單打開多個下拉菜單

現在我確定在isntances打開之前關閉它們一定非常簡單。但是，如果你看看這個小提琴：http://jsfiddle.net/g2c10t53/

如果我是簡單地刪除一些JQuery的所有出現：

$('.dropdown-toggle').attr('aria-expanded',false); 
$('.dropdown-menu').removeClass('open');

雖然這在理論上使它工作，我現在不能點擊相同的按鈕，我已經打開關閉它。它根本不算什麼，這樣我就可以刪除：

$('.dropdown-toggle').attr('aria-expanded',false);

不過，如果我是開始按鈕，我有一個問題，我必須點擊兩次打開，我不想做其他的下拉菜單之間交換。

我一直在試圖找到一種方法，我可以通過.each()發生$('.dropdown-toggle')來檢查它的屬性ID是否等於單擊的屬性ID，如果不刪除所述下拉的發生並更改aria-擴大到假，但我沒有運氣。

有什麼建議嗎？謝謝。

來源

2014-12-04 mdixon18

在'中是否可以有更多'按鈕''ul'對。BTN-group'？點擊頁面中的任何其他按鈕時，是否要關閉所有其他菜單？或者只是在炫耀自己的？ – reyaner 2014-12-04 22:21:40

這個問題應該有所幫助：http://stackoverflow.com/questions/2868582/click-outside-menu-to-close-in-jquery – philtune 2014-12-04 22:22:56

因此，這裏是我的刺吧：

Fiddle goes here

我們所做的是改變你如何計算哪些元素火上：

IF塊

if ($(this).attr('aria-expanded') === "false") { 
    var menuID = $(this).attr('id'), 
     parentScope = $(this).parent().parent(); 
    parentScope.find('ul').removeClass('open').attr('aria-expanded', false); 
    parentScope.find('ul[aria-labelledby=' + menuID + ']').addClass('open') 
    parentScope.find('button[aria-expanded=true]').attr('aria-expanded', false); 
    $(this).attr('aria-expanded', true); 
}

The parentScope variable可以存在於文檔層次比菜單更高的任何節點進行填充，所以合理的，你可以用一些替代的行

var parentScope = $(this).parent().parent();

像

var parentScope = $(document.body);

我們確保我們在.siblings()受到div.btn-group元素的約束之前，用此選擇所有ul元素。

希望有所幫助。

來源

2014-12-04 22:21:58

這很好，但我希望它可以在整個頁面中打開，而不僅僅是在同一部分。如果一個下拉菜單位於導航欄中而另一個位於頁面內容的其他位置，則僅在父範圍內查看並不理想。 – mdixon18 2014-12-04 22:30:49

@Matthew - 「parentScope」是一個任意的容器。嘗試將它設置爲'$（document.body）'，它仍然可以工作。 – 2014-12-04 22:31:44

是的，我只是在更改JS小提琴的過程中更新和評論在這裏，以防其他人有類似的問題。但是，您的評論適用於此。感謝您的回覆。 – mdixon18 2014-12-04 22:36:51

你想知道用戶點擊你的元素以外的untoggle時：

$(document).click(function(e){ 
    if($('#menuONE').has(e.target).length === 0) { 
     // toggle menu to close 
    } 
});

這是默認的方式，我見過的大多數網站處理關閉菜單，當用戶點擊遠離它。您正在檢測所有點擊並確定點擊是否在您的元素之外。 #menuONE將是你的菜單元素。如果用戶點擊它，則不希望菜單關閉。

來源

2014-12-04 22:26:18 philtune

然而，這並不是我在我的問題中所要做的，對於那些希望適應此代碼的人來說，這是一個很棒的評論。我會爲它投票。 – mdixon18 2014-12-04 22:41:42

真棒，我會採取upvotes我可以得到他們。 :) – philtune 2014-12-04 22:42:37

當我只需要打開一個下拉菜單時，JQuery下拉菜單打開多個下拉菜單

回答

相關問題