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

时间:2012-07-01 12:31:53

标签: javascript jquery css

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

这会在点击帐户部分时显示帐户下拉列表。如果再次单击或单击页面上的其他部分,我怎么会使它消失?

5 个答案:

答案 0 :(得分: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");
})​

答案 1 :(得分:0)

您只需向整个文档添加点击侦听器,并隐藏下拉列表(如果已显示)。

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

答案 2 :(得分:0)

在点击功能上,您可以添加以下代码

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

});

答案 3 :(得分:0)

我知道已经给出了正确答案,但我想与您分享此插件:http://benalman.com/projects/jquery-outside-events-plugin/

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

答案 4 :(得分:0)

很简单,只需在菜单上使用stopPropagation,然后给'文档'点击事件'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');
});