我有一个带有onClick事件的div .post-control
。点击后,会出现一个内部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消失。
答案 0 :(得分: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;
});
演示:Fiddle
答案 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
方法将侦听器绑定到事件并在一次触发后将其销毁。
答案 2 :(得分: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();
}
})
答案 3 :(得分:0)
您可以通过更简单的方式轻松解决问题。
$('.post-control').click(function(e){
$('.post-control-popover').toggleClass('disable');
});
你现在只需要为你的css添加一个名为'disable'的类,并给它display:none,opacity:0或visibility:hidden。
问候Timotheus
答案 4 :(得分: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();
});