У меня есть 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.
Вы можете добавить одно событие для всего документа, который закрывает ваш .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
метод связывает слушателя с событием и уничтожает его после одного пожара.
Пытаться
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;
});
Демо: скрипка
once
и добавил его во время события щелчка.
$('.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();
}
})
вы можете легко решить это проще.
$('.post-control').click(function(e){
$('.post-control-popover').toggleClass('disable');
});
вам просто нужно добавить к вашему css класс под названием "disable" и дать ему либо отображение: none, opacity: 0 или visibility: hidden.
приветствие Тимофей
Или это:
$('.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();
});