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的更多相关文章

  1. 【javascript】jq之display:none与visible:hidden

    今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给目标元素附加一个"display: none"属性,那么如果在类似于下面的布局中 ...

  2. display:none与visible:hidden的区别 slideDown与

    display:none与visible:hidden的区别 display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被 ...

  3. display:none与visible:hidden的区别

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...

  4. Readonly和disabled的区别 display:none和visible:hidden的区别

    怎样使input中的内容为只读,也就是说不让用户更改里面的内容. <input type="text" name="input1" value=" ...

  5. display:none与visible:hidden区别

    if(list.style.display=='none'){                 list.style.display='block';             }else{       ...

  6. display:none和visible:hidden两者的区别

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别:display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就是 ...

  7. CSS中：display:none与visible:hidden的区别

    display:none视为不存在且不加载,即,不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失. visibility:hidden隐藏,但在浏览时保留位置,即,使对象在网页上不可见,但该对 ...

  8. display:none和visibility:hidden区别

    <!-- display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: --> <!-- display:none 不为被隐藏的对象保留其物理空 ...

  9. visible:hidden和dispaly:none的区别

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...

随机推荐

  1. C#_switch语句，for循环，do while循环,while循环

    1:switch语句,代码如下: using System; using System.Collections.Generic; using System.Linq; using System.Tex ...

  2. maven在pom文件中引入了icepdf-core包，pom文件却莫名的报错，说jai_core包missing

    maven在pom文件中引入了icepdf-core包,却莫名的报错,说jai_core包missing,把这个jai_core包引入之后还是一样报错,PS:icepdf-core使用的时候不用引用j ...

  3. TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器

    TIZ_c 第0周总结(2019/10/15-2019/10/22)工欲善其事必先利其器 任务清单 给自己取一个酷酷的id,并选择1-2个喜欢的方向.(只是初步选择,后期可更改) 改下群名片.例如yo ...

  4. Flutter移动电商实战 --（11）首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  5. IDEA 运行单元测试报错 @{argLine}

    sentinel是今年阿里开源的高可用防护的流量管理框架. git地址:https://github.com/alibaba/Sentinel wiki:https://github.com/alib ...

  6. SpringCloud（三）之Feign实现负载均衡的使用

    一 点睛 Feign是Netflix开发的声明式.模板化的HTTP客户端, Feign可以帮助我们更快捷.优雅地调用HTTP API. 在Spring Cloud中,使用Feign非常简单——创建一个 ...

  7. C++ STL——模板

    目录 一 函数模板的特性 二 模板的实现机制 三 类模板 四 类模板如何派生子类 五 普通类的.h和.cpp文件分离 六 类模板在类内类外的实现 七 模板的应用实例 注:原创不易,转载请务必注明原作者 ...

  8. mariadb数据库(1)

    一.什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方法来管理数据库里的数 ...

  9. 安卓控件支持HTML标签

    http://www.cnblogs.com/xqxacm/p/5092557.html

  10. [Python]最长公共子序列 VS 最长公共子串[动态规划]

    前言 由于原微软开源的基于古老的perl语言的Rouge依赖环境实在难以搭建,遂跟着Rouge论文的描述自行实现. Rouge存在N.L.S.W.SU等几大子评估指标.在复现Rouge-L的函数时,便 ...