JQuery的單擊另一個元素時隱藏下拉菜單

Question

我有以下的HTML創建一個下拉菜單：

<li class="user-section user-section-original"> 
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/> 
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span> 
</li> 
<li class="user-section-dropdown user-section hidden"> 
    <img class="user-image" src="{{ user.get_profile.avatar_small.url }}" height="30" width="30"/> 
    <span class="name">{{ user.first_name }} {{ user.last_name.0}}.</span> 
    <a href="{% url logout %}" class="dropdown-item">Log Out</a> 
</li> 

當用戶點擊菜單，就會下拉列表，然後如果用戶再次點擊它（或點擊下拉菜單以外的任何地方），它會再次隱藏。

這是我到目前爲止有：

$("#header li.user-section").click(function() { 
    $("#header .user-section-dropdown").css('display', 'block'); 
    $("#header .user-section-original").css('display', 'none'); 
}); 

這使得被點擊帳戶部分時，帳戶下拉菜單出現。當我再次點擊或點擊頁面上的其他部分時，我會如何使它消失？

Answer 1

您只需將點擊偵聽器添加到整個文檔中並隱藏下拉菜單（如果顯示）。

$(document).click(function() { 
    if($("#header .user-section-dropdown").css('display') == 'block') { 
     $("#header .user-section-dropdown").css('display', 'none'); 
     $("#header .user-section-original").css('display', 'block'); 
    } 
}); 

此外，您還需要修改原有的功能，使得它處理這兩種情況下：

$("#header li.user-section").click(function(e) { 
    if($("#header .user-section-dropdown").css('display') == 'none') { 
     $("#header .user-section-dropdown").css('display', 'block'); 
     $("#header .user-section-original").css('display', 'none'); 
     e.stopPropagation() 
    } 
    else { 
     $("#header .user-section-dropdown").css('display', 'none'); 
     $("#header .user-section-original").css('display', 'block'); 
    } 
}); 

e.stopPropagation（）用來不讓文檔單擊處理程序被調用。

Answer 2

我認爲最簡單的方法是切換一個類而不是直接應用樣式。

$("#header li.user-section").click(function() { 
    $("#header .user-section-original").toggleClass("hidden"); 
}); 

然後在你的CSS做出這樣

.hidden { display:none; } 

的非語義類要讓它消失，當你點擊其他地方試試：

$(​window).click(function(e){ 
    var $target = $("#header .user-section-original"); 
    if($target.hasClass("hidden"); 
     $target.removeClass("hidden"); 
})​ 

Answer 3

在點擊功能，你可以添加以下代碼

$('li[class$="dropdown"]').css('display', 'none') 

這將設置所有li元素以dorpdown display:none結尾，然後您可以顯示指定的下拉菜單display:block。最後你也會有這樣的事

$(".specificliclass").click(function(){ 
$('li[class$="dropdown"]').css('display', 'none'); 
$('.specificliclass').css('display', 'block') 

}); 

Answer 4

我知道正確的答案已經給出，但我想分享這個插件與你：http://benalman.com/projects/jquery-outside-events-plugin/

這是一個簡單的插件，它結合上點擊一個元素外。在這個綁定函數中，你只需檢查你的元素是否可見或隱藏。這是可見的，隱藏它。

Answer 5

簡單，只需在菜單上使用stopPropagation，並給'document'點擊事件'removeClass'方法;
提示：爲了將整個身體移動到左/右側，您可以將菜單中的「body」元素一起移動; 我剛剛應用這種方法。帶了我一天！一天。

$('.button').bind('click', function(e) { 
    e.stopPropagation(); 
    $('.menu').toggleClass('slide'); 
}); 


// slide out when click other parts of current page 

$(document).click(function(){ 
    $('.menu').removeClass('slide-in'); 
});