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'); 
});