如何点击隐藏和显示一个div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何点击隐藏和显示一个div相关的知识，希望对你有一定的参考价值。
基本思想是：触发div的hide()和show()函数。
比如：要点击隐藏或者显示<div id="div"></div>
然后为一个按钮（id="btn"）或者其他控件绑定一个单击事件（下面使用了jQuery）
$(function() // 页面加载完成之后，进行事件绑定$("#btn").toggle(
function ()
$("#div").hide();// 第1,3,5,7,8,9....次点击按钮，div隐藏
,
function ()
$("#div").show();// 第2,4,6,8....次点击按钮，div显示
);
); 参考技术A 简单的办法，把"<DIV id="div1">隐藏的内容</DIV>"一句中加上style="displsy:none"，也就是改为
<DIV id="div1" style="display:none">隐藏的内容</DIV>
如何在外部的任何点击上隐藏 div
【中文标题】如何在外部的任何点击上隐藏 div【英文标题】：How to hide the div on any click outside 【发布时间】：2012-11-05 16:54:52 【问题描述】：我开始使用 jquery 并试图创建一个简单的 div 隐藏和显示效果。效果似乎很好，但我需要当用户点击文档的任何其他部分（即除了隐藏/显示框）时，该框应该隐藏起来。这是jsfiddle： http://jsfiddle.net/39DzJ/。我没有正确设计它。我希望效果首先起作用。 谁能帮我吗 ？ 这是 HTML 代码：
<style>
#mail_floater
background:#fce8bd;
height:88px;
width:342px;
border:1px solid #b7ad02;
border-radius:5px;
position:absolute;
left:200px;
top:50px;
border-top:none;
z-index:100;
padding:0;
#subscribe_user
width:248px;
height:16px;
border:1px solid #b7ad02;
#cust_care_floater
background:#fce8bd;
height:12px;
width:108px;
border:1px solid #b7ad02;
border-radius:2px;
border-bottom-left-radius:2px;
position:absolute;
left:450px;
top:30px;
border-top:none;
z-index:100;
clear:both;
font-family:Tahoma, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
color:#036f05;
box-shadow:1px 1px 3px #ccc inset;
#closer
float:right;
margin-right:5px;
margin-top:2px;
width:19px;
height:19px;
background:url(../images/close.png) no-repeat;
</style>
</head>
<body>
<a href="#" id="subscribe">Subscribe</a>
<a href="#" id="customer_care">Customer care</a>
<div id="mail_floater">
<h5>Email</h5>
<div id="closer"></div>
<div id="email_input"><form><label>Enter E-mail : </label><span><input type="text" id="subscribe_user" /></span>
<input type="submit" id="subscribe_me" value="Done" /></form></div>
</div>
<div id="cust_care_floater">
<span style="padding:0px 10px 0 10px;">033-993-99920</span>
</div>
</body>
javascript代码：
$(document).ready (
function()
var disp_box=$('#mail_floater');
var sub_link=$('#subscribe');
var disp_box_2=$('#cust_care_floater');
var sub_link_2=$('#customer_care');
disp_box.hide();
disp_box_2.hide();
sub_link.click
(
function()
disp_box.show();
);
disp_box.find('#closer').click
(
function()
disp_box.hide();
);
sub_link_2.click
(
function()
disp_box_2.show();
);
);
【问题讨论】：
【参考方案1】：$(document).on('click', ':not(.hideDiv)', function(e)
if($(e.target).is(':not(.hideDiv)')) //extra check for good measure
$('.hideDiv').hide();
);
演示：http://jsfiddle.net/maniator/S9fDy/
【讨论】：
@neal 感谢您的帮助。但这在我的代码中不起作用。它永久隐藏了盒子。放置此代码后单击锚点不会显示该框 是的，现在效果正在工作，但即使我在 div 或 div 的任何元素中单击，div 也会隐藏。有什么解决办法吗？ @user1720527 摆弄它。我相信你会明白的：-D以上是关于如何点击隐藏和显示一个div的主要内容，如果未能解决你的问题，请参考以下文章