整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
html页面，显示的内容太多，会影响用户体验，如果有一些，点击才出现的内容，就可以减少内容的干扰。使用jquery就可以很快的实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div隐藏测试</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
<body>
<button id="controller">隐藏或者显示</button>
<div id="contents" style="display: none;">
<p>div的内容</p>
</div>
<script>
$("#controller").click(function () {
if ($("#contents").is(":hidden")) {
$("#contents").show()
} else {
$("#contents").hide()
}
})
</script>
</body>
</html>
$("#contents").is(":hidden") 可以判断是否是隐藏
$("#contents").show() 表示display:block,
$("#contents").hide() 表示display:none;
操作元素的属性
$("#contents").attr("style","display:none;"); //隐藏div
$("#contents").attr("style","display:block;"); //显示div
也可以操作css属性
$("#contents").css("display","none"); //隐藏div
$("#contents").css("display","block"); //显示div
也可以直接使用toggle转换开关实现
$("#contents").toggle()
个视频来说一个有时候前端面试会问到的CSS的面试题，就是让元素隐藏的这几种方式，它们具体的用法和区别。具体去用我相信大家都用过，但是要把这个题回答的很好，把它们之间的区别捋清，不妨来说一下。
这里写了两个div，一个红色、一个蓝色，现在把红色这个给它隐藏掉，上面写的3种方法都可以把它隐藏掉。区别在哪里？
·先来试一下opacity，红色的div确实不见了。
·再来试一下第二种visibility，刷新一下，红色的div也是看不见了，好像和第一种方法没什么区别。
·最后来试一下display，这种方法，红色的div不单止不见了，连蓝色的div它的位置也发生改变了。
先来说一下前面两种，因为前面两种方式，它们表现出来的形式实在太像了。现在用的是opacity，其实是改变了元素的透明度，也就是让它完全透明了，所以才看不到它。但实际上它还是存在的，还是在这里的，只是看不到而已。所以这个方式，它是需要对元素所占的空间的给它排列出来，也就是它还是占的这个空间的。
其次不光是把它所占的空间排列出来，浏览器还需要对元素进行渲染，只不过是把它渲染成透明的，它还是存在的，所以是可以对它进行交互操作的，这一点等一下可以通过js去证明。
接着就是把visibility设置成hidden，这一个的排列方式和刚才设置透明度的是一样的，但是它们有什么区别？这个看得出来，还是需要对它所占的空间进行排列的，它还是占着那个位置的，但是它也仅仅是占着那个空间而已。浏览器已经不对元素进行渲染了，所以空间给你保留，但是元素不存在，就没办法进行交互了。
最后就是display为none，很明显蓝色的div它的位置已经改变了，它占据了原本红色div的位置，也就是红色div原本的那个位置空间已经没有了。其实这种方式，已经不是单纯的把元素给隐藏了，已经是把元素的核模型给修改了，直接就把这个元素给干没了，所以它是既不排列也不渲染。
如果是作为一个面试题来回答，最好还回答到一点，在这三个里面来比较，opacity透明度的这种方式它是最消耗性能的，因为不单止要帮你把位置空出来，还要完完全全的把你给渲染出来，只不过是渲染成透明的，所以它是这三个里面最消耗性能的。
visibility它就是没那么消耗性能，因为这个只是给它保留个位置，保留个空间就可以了，不用对它进行渲染，所以它就没那么消耗性能，display的方式就是完全不消耗性能了。
最后再来看一下用opacity这个元素是不是真的还存在，还可以交互，然后用visibility就已经不可以交互了，这里再把它改成opacity，来写一下js，这里很简单，就给它添加一个点击事件，因为这个元素它还存在，肯定就可以点得到它。
把鼠标移到这个位置，看一下这个元素还存不存在，还可不可以点击得到它，点击一下，发现没有，可以弹出这个OK，证明这个元素它还是存在的，只不过看不到它而已。再把前面给它改一下，改成visibility的方式，再来点这个位置，现在无论我怎么点它都没有反应了，因为这个元素它压根就不存在了，只是空着这个位置在这里而已。
这个视频就到这里，感谢大家的收看。
][1]
jQuery本身没有这样一个事件，要实现这个效果，我们首先要先了解javascript中的事件冒泡。
冒泡定义：当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。（摘自网络）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Click
上述代码运行后，点击链接，以此会出现link, inner, outer, document,转向百度。
也就是说我们点击链接后 click事件一直冒泡传递在最外层body。
1. 阻止事件冒泡, 并不阻止事件行为：event.stopPropagation();
$(function() {
$("#link").click(function(event) {
event.stopPropagation();
});});上述代码运行后，点击链接，按顺序会出现link, 转向百度。
2. 阻止事件行为，并阻止事件冒泡 ：event.preventDefault();
$(function() {
$("#link").click(function(event) {
event.preventDefault();
});});上述代码运行后，点击链接，按顺序会出现link, inner, outer, document, 但是不转向百度。
3. 阻止事件冒泡, 也阻止事件行为：return false;
$(function() {
$("#link").click(function(event) {
return false;
});});上述代码运行后，点击链接，只会出现link。
因此我们可以看出事件冒泡不一定是个坏的东西，有些情况会让不同层次捕获不同的事件！
所以鼠标点击Div区域外隐藏Div正需要用到事件冒泡。
*请认真填写需求信息，我们会在24小时内与您取得联系。
