在菜單外部單擊時摺疊菜單，但在內部單擊時保持打開狀態

我正嘗試使用JQuery創建彈出式菜單。這個菜單顯示何時點擊某個元素，當然，當再次點擊相同的元素時，它會崩潰。現在我想要的是，在這個菜單打開後，當用戶點擊網頁上的任何地方時，菜單應該關閉。我正在使用下面的代碼來完成此操作。在菜單外部單擊時摺疊菜單，但在內部單擊時保持打開狀態

<script> 
$(document).on('click',function(){ 

$('#div-header-submenu').collapse('hide');

}）;

現在發生的事情是，當用戶點擊網頁上的任何地方，包括菜單自己，菜單關閉。所以，即使您嘗試訪問（＃div-header-submeu）中的子菜單，它也會打開子菜單，但會摺疊主菜單。
任何想法如何解決這種情況？爲了重新迭代，我需要＃div-header-submenu在主菜單中單擊時保持打開狀態，但如果在外部任何位置點擊則會崩潰。

這是菜單的小提琴完整的標記 https://jsfiddle.net/ozbk3kLs/

感謝，

來源

2016-04-29 Muhammad

您可以添加HTML標記和jQuery的其餘部分，顯示/隱藏菜單.. – Arty

只需添加鏈接到小提琴。這是jquery的標準引導 – Muhammad

海蘭， @Dhaval Chhenda答案應該工作。思維的另一種方式是包裝所有頁面內容在

<div id="main">...</div> <menu>...</menu>

與你的菜單在它之外。然後調用主標籤on('click')方法如下所示：https://api.jquery.com/click/

，會給你像

HTML：

<body> <div id=main> Content </div> <menu> menu </menu> </body>

的javascript：

$("#main").click(function() { $('#div-header-submenu').collapse('hide'); });

css：

menu { z-index: 100; }

z-index應該放在頂部以確保它位於佈局的頂部。

希望它會幫助你:)

來源

2016-04-29 10:47:34

另外，您可以盡情享受完整的CSS：p –

如何在CSS中執行此操作？ – Muhammad

所以這一個工作！非常感謝！ – Muhammad

你可以使用一個沒有選擇器，因爲現在你的狀態本身就是「點擊文檔的任何地方」，所以你可以嘗試一些這樣

$("body:not(#div-header-submenu").on('click',function(){ 

$('#div-header-submenu').collapse('hide'); 
});

，你可以嘗試這一點，看看會發生什麼

來源

2016-04-29 10:23:50

嗨達瓦爾，它不工作。我的意思是，它不會關閉菜單，無論您是在潛水中還是在潛水之外點擊。 – Muhammad

理想情況下，當菜單打開時，您應該有一個動態附加的類，然後當您將該類遠離它時，它應該關閉。打開按鈕上的點擊事件應該添加一個類似打開的類，並且當它在外部點擊時那個班級應該取下 –

你能否請一個例子詳細說明一下？ – Muhammad

不是將click事件連接到整個文檔，而是將click連接到主體內的一個元素（參見下面的示例）。

只要您的標題子菜單（打開時）置於該元素的頂部（在圖層中考慮），它只會'記錄'點擊'標題 - 子菜單'的'外部'。所以點擊你的標題 - 子菜單不會觸發你的關閉功能。我的意思

非常簡單的例子：

<div id="container"> 
    <div id="inner"></div> 
    <div id="element"></div> 
</div>

https://jsfiddle.net/Airrudi/awndqe1t/

來源

2016-04-29 10:34:07 Airrudi

所以，如果我正確理解這一點，你是說點擊應該連接到身體內的任何股利？ – Muhammad

我已經添加了一個基本的jsfiddle我的意思 – Airrudi

<div class='menu'></div> 



    $('body').on('click',function(){ 
     if(!$(this).hasClass('menu')) 
     $('#div-header-submenu').collapse('hide'); 
    });

來源

2016-04-29 10:37:49

似乎沒有工作:) – Muhammad

你可以分享你的網址，在小提琴它看起來像一個廢話 –

它還沒有生活。它在我的本地系統上。 – Muhammad

在菜單外部單擊時摺疊菜單，但在內部單擊時保持打開狀態

回答

相關問題