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ハンドラーを登録し、 ：visibleセレクターを使用して、パネルが非表示かどうかを判断できます。html

$(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 に答える