jq之display:none与visible:hidden
http://www.cnblogs.com/linxiong945/p/4075146.html
今天学习到jquery的hide()部分时，突然有一个想法，jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性，那么如果在类似于下面的布局中运用，会发生什么情况？
先把布局的代码贴上来
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5 <script src="jquery.js"></script>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11 .box {
12 width: 300px;
13 height: 150px;
14 text-Align: center;
15 border: 2px solid;
16 margin: 100px auto 0 auto;
17 }
18 .box .content {
19 width: 100%;
20 height: 100px;
21 line-height: 100px;
22 background: #666;
23 }
24 .box .click {
25 background: #ccc;
26 width: 300px;
27 padding: 15px 0;
28 }
29 </style>
30 <title>jquery</title>
31 </head>
32 <body>
33 <div class="box">
34 <div class="content">显示原来的内容</div>
35 <div class="click">
36 <input id="change" type="button" value="改变文字内容" />
37 <input id="hide" type="button" value="隐藏/显示" />
38 </div>
39 </div>
40 </body>
41 </html>
然后给两个按钮绑定上点击事件，第一个改变文字内容，第二个隐藏/显示上面的内容部分。
1 <script type="text/javascript">
2 $(function(){
3 $('#change').click(function(){
4 $('.content').html("显示改变了的内容！");
5 });
6 $('#hide').click(function(){
7 $('.content').fadeToggle();
8 });
9 });
10 </script>
代码里的"$(function(){})"部分是"$('document').ready(function(){})"的简写，这个稍后再论。
现在点击事件绑定上了，分别点击两个按钮。
点击改变文字内容按钮：
看起来没有问题！
再点击显示/隐藏按钮：
按钮条怎么跑上面去了？
通过浏览器调试查看
可以看到jquery是通过给元素附加了"display: none"而达到效果的。
上网查了一下，"display：none"的作用是吧某个元素隐藏起来，并且不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。这样就造成了下面的按钮块向上浮动了。如何解决这个问题呢？
我首先想到的是把按钮块给固定在box框的底部，这样不论上面元素块是否存在，都不会影响到下面的按钮块的位置。
要达到这样的效果，首先得把按钮块从文档流中弹出，使文档流中的元素无法影响到这个元素的位置，浮动"float"和绝对定位"absolute"可以达到目的。
不过当用浮动实现时，发现点击显示/隐藏按钮，由于内容块忽而显示忽而消失，导致按钮块内的按钮元素也随之移动，显然内容块是否存在对浮动元素的位置是有影响的，这样显然是失败的。
当使用绝对定位时，通过计算其坐标，倒是达到了效果，不过如果父元素块的布局稍微发生改变，按钮块绝对定位的位置却没有变化（绝对定位基于body），这样显然破坏了该结构的布局，这样的布局是脆弱的，不是我们想要达到的效果。
显然通过布局来解决这个问题是不现实的。那就从其他方面入手。
元素的隐藏有两个方法：display:none和visible:hidden。
两者都可以将元素给隐藏起来，不过有所区别：
display:none
不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden
使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
这样就找到方法了！将隐藏的实现由"display:none"更改为"visible:hidden"就行了。
于是js代码更改为：
1 $(function(){
2 $("#change").toggle(function(){
3 $(".content").html("显示改变的内容");
4 },function(){
5 $(".content").html("显示原来的内容");
6 });
7 $("#hide").toggle(function(){
8 $(".content").css("visibility","hidden");
9 },function(){
10 $(".content").css("visibility","visible");
11 });
12 });
完美解决了问题!
总结：
就像脑筋急转弯，有时候换个思路想一想，其实问题很简单。
jq之display:none与visible:hidden的更多相关文章
- 【javascript】jq之display:none与visible:hidden
今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中 ...
- display:none与visible:hidden的区别 slideDown与
display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...
- display:none与visible:hidden的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
- Readonly和disabled的区别 display:none和visible:hidden的区别
怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...
- display:none与visible:hidden区别
if(list.style.display=='none'){ list.style.display='block'; }else{ ...
- display:none和visible:hidden两者的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是 ...
- CSS中：display:none与visible:hidden的区别
display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对 ...
- display:none和visibility:hidden区别
<!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...
- visible:hidden和dispaly:none的区别
display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...
随机推荐
- 状压dp之不相连块
传送门 一块田里草地格子不能相邻,问有几种方案. 预处理不相邻块 #include<iostream> #include<cstdio> #include<algorit ...
- nginx开启目录浏览，解决中文乱码问题
nginx开启目录浏览,解决中文乱码问题 方法如下: server { listen 80; #listen [::]:80; server_name gongzi.liwenhui.xin gz.l ...
- URL编码和解码
1. 为什么需要编码 当数据不利于处理.存储的时候,就需要对它们进行编码.如对字符进行编码是因为自然语言中的字符不利于计算机处理和存储.对图片信息.视频信息.声音信息进行压缩.优化,将其“格式化”,是 ...
- 前端与后台可能需要使用交互的表单form，input标签
前端与后台可能需要使用交互的表单标签 form表单和input标签 textarea文本域表单 select,option下拉列表表单 fieldset和legend组合表单 label标签 form ...
- html里 调整字间距
使用字与字的间距可设置letter-spacing属性实现,例如:1.p{letter-spacing:15px;}即表示<p>这是一段文字</p>标签里的文字间距为15px. ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_4-05 微服务调用方式之feign 实战 订单调用商品服务
笔记 5.微服务调用方式之feign 实战 订单调用商品服务 简介:改造电商项目 订单服务 调用商品服务获取商品信息 Feign: 伪RPC客户端(本质还是用http) ...
- Dozer映射
1.为什么要映射 一个映射的框架在一个分层的体系架构中非常有用,特别是你在创建一个抽象的分层去包装一些特殊数据的变化 vs 这些数据传输到其它层(外部服务的数据对象.领域的数据对象.数据传输对象.内部 ...
- leetcode 257. 二叉树的所有路径 包含（二叉树的先序遍历、中序遍历、后序遍历）
给定一个二叉树,返回所有从根节点到叶子节点的路径. 说明: 叶子节点是指没有子节点的节点. 示例: 输入: 1 / \2 3 \ 5 输出: ["1->2->5", & ...
- Java类的加载及初始化
每个类的编译代码都存在于它自己的独立文件中,该文件在需要使用该程序代码时才会被加载.通常有以下三种加载情况: (1) 访问了子类的静态变量或静态方法:仅对类的静态变量,静态块执行初始化操作,并仅初始化 ...
- vue是一个渐进式的框架，我是这么理解的
vue是一个渐进式的框架,我是这么理解的 原文地址 时间:2017-10-26 10:37来源:未知 作者:admin 每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主 ...