4

好的，我在这里使用这个 jQuery：

$('html').click(function(){
    if ($(".trigger").hasClass("active"))
    {
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
    }
});

$(".panel").click(function(event){
    event.stopPropagation();
});

$(document).ready(function(){
    $(".trigger").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
});

好的，所以回复说我应该访问另一个答案，已经尝试过了，但这仅在第一次尝试时有效。如果我在此之后再次单击触发器而不是单击页面中的任何位置，则它不再起作用。当它可见时，它无法始终隐藏它。我怎样才能解决这个问题？

因此，当面板显示时，我希望能够在面板外部单击以在每次显示时再次隐藏它。我希望有机会只能通过单击 class="trigger" 对象来显示和隐藏 class="panel" 对象，方法是再次单击 class="trigger" 对象或单击外部页面上任何位置的 class="panel" 对象。

我怎样才能做到这一点？

4

2 回答 2

1 
$('.panel').hide();

$(document).click(function(e){
    var $t = $(e.target);
    if($t.is('.trigger *,.trigger')){
        $(".panel").toggle("fast");
        $t.closest('.trigger').toggleClass("active");
    } else if(!$t.is('.panel *,.panel')){
        $(".panel").hide("fast");
        $('.trigger.active').removeClass("active");
    }
});

在这里查看：http: //jsfiddle.net/5fU3v/2/

于 2011-06-25T07:32:37.340 回答
0

您可以在触发器上注册的处理程序中停止事件传播click，然后在元素上注册另一个click处理程序html并使用:visible选择器来确定面板是否隐藏：

$(document).ready(function() {
    $(".trigger").click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(".panel").toggle("fast");
        $(this).toggleClass("active");
    });

    $("html").click(function() {
        var $panel = $(".panel:visible");
        if ($panel.length) {
            $panel.hide("fast");
            $(".trigger").removeClass("active");
        }
    });
});
于 2011-06-25T07:12:30.673 回答