点击页面上的jQuery问题

| 好的，我在这里使用这个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 = \“ trigger \”对象以显示和隐藏class =“ panel \”对象再次单击对象，或者在页面上任何地方单击class =“ panel \”对象之外的对象。我怎样才能做到这一点？

已邀请:

2 个回复

逝媳蘑贩茄

$(\'.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/

抢垢洛韧

您可以在触发器上注册的click处理程序中停止事件传播，然后在html元素上注册另一个click处理程序，并使用：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\");
        }
    });
});

要回复问题请先登录或注册

点击页面上的jQuery问题

2 个回复

发起人

toggleclass

jquery

问题状态

点击页面上的jQuery问题

与内容相关的链接

2 个回复

发起人

toggleclass

jquery

问题状态