0

.post-controlonClick イベントを持つ divがあります。クリックすると、内側の div.post-control-popoverが表示されます。もう一度クリックすると、内側の div が消えます。私が使用しているコード:

$('.post-control').click(function(e){

        $(this).toggleClass("active");

    var bool = $('.post-control').hasClass('active');    

             if(bool)
        {
                    $('.post-control-popover').show();
        }
        else
        {
                    $('.post-control-popover').hide();
        }


     e.preventDefault();      
 });

外側の div の外側の onClick で内側の div が消えるようにするには、このコードに何を追加する必要がありますか。

4

5 に答える 5

2

試す

var $pc = $('.post-control'),
    $pcp = $('.post-control-popover');
$pc.click(function (e) {
    $(this).toggleClass("active");
    $pcp.toggle($(this).hasClass('active'));

    $(document).one('click', function () {
        $pc.removeClass("active");
        $pcp.hide()
    })

    return false;
});

デモ:フィドル

于 2013-09-24T14:48:40.423 に答える
1

ドキュメント全体を閉じるイベントを 1 つ追加できます。.post-control-popover

$('.post-control').click(function(e){
    $(this).toggleClass("active");
    var bool = $('.post-control').hasClass('active');    

    if(bool)
    {
        $('.post-control-popover').show();
        $(document).one('click', function() {
            $('.post-control-popover').hide();
        });
    }
    else
    {
        $('.post-control-popover').hide();
    }

    e.preventDefault();      
});

oneメソッドはリスナーをイベントにバインドし、1 回の発火後にそれを破棄します。

于 2013-09-24T14:46:23.220 に答える
1 
$('.post-control').click(function(e){
    $('.post-control-popover').show();
}); 

$('body').click(function(e){
    e.preventDefault();
    if(e.currentTarget.class != 'post-control-popover') {
        $('.post-control-popover').hide();
    }

})
于 2013-09-24T14:50:09.873 に答える