Скрыть элементы при щелчке вне запускающего элемента

0

У меня есть div .post-control с событием onClick. После нажатия появляется внутренний 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();      
 });

Что я должен добавить к этому коду, так что onClick вне внешнего div приведет к исчезновению внутреннего div.

Теги:

5 ответов

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 метод связывает слушателя с событием и уничтожает его после одного пожара.

Поделиться
  • 0
    Я нашел решение, я приму ваше, даже если не пробовал. и я добавлю свое решение в качестве редактирования к вашему, пожалуйста, чтобы принять мое изменение.
  • 1
    @whitelettersandblankspaces Если вы нашли свое собственное решение, опубликуйте свой ответ.
Показать ещё 4 комментария
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;
});

Демо: скрипка

Поделиться
  • 0
    Я бы щелкнул документ только once и добавил его во время события щелчка.
  • 0
    @MathewFoscarini да хорошая идея
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();
    }

})
Поделиться
0

вы можете легко решить это проще.

$('.post-control').click(function(e){
    $('.post-control-popover').toggleClass('disable');
});

вам просто нужно добавить к вашему css класс под названием "disable" и дать ему либо отображение: none, opacity: 0 или visibility: hidden.

приветствие Тимофей

Поделиться
  • 0
    Я полагаю, что вы не прочитали весь вопрос.
0

Или это:

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



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

    var if_post_control_active = $('.post-control').hasClass('active');  
        if(if_post_control_active)
        {
                    $('.post-control-popover').show();

 $(document).click(function() {
  $('.post-control-popover').hide();
});
        }
        else
        {
                    $('.post-control-popover').hide();
        }


     e.preventDefault();  
     e.stopPropagation();
 });
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню