单击另一个元素时JQuery隐藏下拉菜单答案

【问题标题】：JQuery hiding a dropdown menu when clicking another element单击另一个元素时JQuery隐藏下拉菜单
【发布时间】：2013-11-12 17:29:23
【问题描述】：

我有以下 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');
});

这会在单击帐户部分时显示帐户下拉菜单。当再次单击它或单击页面上的其他部分时，如何使其也消失？

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您只需将点击监听器添加到整个文档并隐藏下拉菜单（如果显示）。

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

【讨论】：

【解决方案3】：

点击功能可以添加如下代码

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

});

【讨论】：

【解决方案4】：

我知道已经给出了正确答案，但我想与你分享这个插件：http://benalman.com/projects/jquery-outside-events-plugin/

这是一个简单的插件，可以绑定元素外的点击。在这个绑定函数中，您只需检查您的元素是可见还是隐藏。可见，隐藏。

【讨论】：

【解决方案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');
});

【讨论】：