Javascript JQuery在单击另一个元素时隐藏下拉菜单

我使用以下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>

---

这会在单击account部分时显示account下拉列表。再次单击或单击页面上的其他部分时，如何使其消失？

您只需将click listener添加到整个文档中，并隐藏下拉列表（如果显示）

$(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（）用于不让文档单击处理程序被调用。

我认为最简单的方法是切换类，而不是直接应用样式

$("#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");
})​

---

单击函数，您可以添加以下代码

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

这将设置以dorpdown

display:none结尾的所有li元素，然后您可以显示指定的下拉菜单
display:block
。最后，你会有这样的感觉

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

});

我知道已经给出了正确的答案，但我想与您分享这个插件：

这是一个简单的插件，可以绑定元素外部的点击。在这个绑定函数中，您只需检查元素是否可见或隐藏。它是可见的，隐藏它。
很简单，只需在菜单上使用StopperPagation，并提供“文档”单击事件“removeClass”方法

提示：为了将整个身体向左/向右移动，您可以将“身体”元素与菜单一起移动；
我只是应用了这个方法。花了我一天时间！！有一天

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

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