通过选择它以外的任何地方来隐藏div
我试图找到一种方法来显示一个隐藏的div通过点击一个按钮，并隐藏它相同的div如果再次点击按钮，或者如果用户点击div的任何地方。 该功能与Facebook中的通知图标中显示的功能非常相似。
$('.button').click(function() {
if($(".div").css('visibility') == 'visible')
$(".div").css('visibility', 'hidden');
else
$(".div").css('visibility', 'visible');
});
$(".button").click(function() {
event.stopPropagation();
});
$('html:not(.div)').click(function() {
//Hide the div if visible
if($(".div").css('visibility') == 'visible')
$(".div").css('visibility', 'hidden');
});
但是，这似乎并不适用于Firefox / IE，只能在Chrome中使用。 该div在Firefox / IE中根本无法显示。 有没有人有一个更好的方式去做这个想法？
谢谢！
更新：按钮现在显示和隐藏div，并且还单击外部div隐藏它
这里演示： http : //jsfiddle.net/jL2cU/2/
$(document).ready(function(){
$('.form-container').click(function(event){
console.log('click - form');
event.stopPropagation();
});
$('html').click(function(event){
console.log('click - body');
//hide the form if the body is clicked
$('.form-container').css('display','none');
});
$('button').click(function(event){
$('.form-container').toggle();
event.stopPropagation();
});
});
和
<div class="button-container">
<button>Show div</button>
</div>
<div class="form-container">
<fieldset id="" class="">
Here is the TEXT
</fieldset>
</div>
和
.button-container
{
width:300px;
margin:0 auto;
text-align: center;
padding:0px 0px 25px 0px;
}
.form-container
{
display:none;
width:300px;
margin:0 auto;
text-align: center;
background: #777;
}
使用jQuery切换方法。
没有参数，.toggle（）方法只是简单地切换元素的可见性。
$(function() {
$('.button').on('click', function() {
$('.div').toggle();
}
})();