javascript - change - jquery selector list



通過單擊外部關閉jquery下拉菜單 (4)

我正在使用jquery開發一個簡單的下拉菜單。 當用戶按下觸發區域時,它將切換下拉區域。 我的問題是如何在下拉菜單之外進行點擊事件,以便關閉下拉菜單?


Answer #1

停止某些特定元素中的事件傳播可能會變得危險,因為它可能會阻止其他某些腳本運行。 因此,檢查觸發是否來自函數內部的排除區域。

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

此功能在單擊文檔時啟動,但不包括從#menucontainer觸發。 有關詳細信息, https://css-tricks.com/dangers-stopping-event-propagation/


Answer #2

如何在下拉菜單之外進行點擊事件,以便關閉下拉菜單? 繼承人的代碼

$(document).click(function (e) {
    e.stopPropagation();
    var container = $(".dropDown");

    //check if the clicked area is dropDown or not
    if (container.has(e.target).length === 0) {
        $('.subMenu').hide();
    }
})

Answer #3

您需要將click事件附加到某個元素。 如果頁面上有許多其他元素,您不希望將click事件附加到所有元素。

一種可能的方法是在下拉菜單下方創​​建透明div,但在頁面上的所有其他元素上方。 您將在顯示下拉列表時顯示它。 元素有一個隱藏下拉菜單和透明div的點擊錯誤。

$('#clickCatcher').click(function () { 
  $('#dropContainer').hide();
  $(this).hide();
});
#dropContainer { z-index: 101; ... }
#clickCatcher { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 100; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropDown"></div>
<div id="clickCatcher"></div>


Answer #4

所選答案僅適用於一個下拉菜單。 對於多種解決方案將是:

$('body').click(function(event){
   $dropdowns.not($dropdowns.has(event.target)).hide();
});




drop-down-menu