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

　　先把布局的代码贴上来

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="content-type" content="text/html; charset=utf-8" />

         <script src="jquery.js"></script>

         <style type="text/css">

             * {

                 margin: 0;

                 padding: 0;

             }

             .box {

                 width: 300px;

                 height: 150px;

                 text-Align: center;

                 border: 2px solid;

                 margin: 100px auto 0 auto;

             }

             .box .content {

                 width: 100%;

                 height: 100px;

                 line-height: 100px;

                 background: #666;

             }

             .box .click {

                 background: #ccc;

                 width: 300px;

                 padding: 15px 0;

             }

         </style>

         <title>jquery</title>

     </head>

     <body>

         <div class="box">

             <div class="content">显示原来的内容</div>

             <div class="click">

                 <input id="change" type="button" value="改变文字内容" />

                 <input id="hide" type="button" value="隐藏/显示" />

             </div>

         </div>

     </body>

 </html>

　　然后给两个按钮绑定上点击事件，第一个改变文字内容，第二个隐藏/显示上面的内容部分。

 <script type="text/javascript">

     $(function(){

     　　$('#change').click(function(){

        　　$('.content').html("显示改变了的内容！");

        });

        $('#hide').click(function(){

           $('.content').fadeToggle();

        });

     });

 </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代码更改为：

 $(function(){

     $("#change").toggle(function(){

         $(".content").html("显示改变的内容");

         },function(){

         $(".content").html("显示原来的内容");

     });

     $("#hide").toggle(function(){

             $(".content").css("visibility","hidden");

         },function(){

         $(".content").css("visibility","visible");

     });

 });

　　完美解决了问题!

　　总结：

　　　　就像脑筋急转弯，有时候换个思路想一想，其实问题很简单。

【javascript】jq之display:none与visible:hidden的更多相关文章

  1. jq之display:none与visible:hidden

    http://www.cnblogs.com/linxiong945/p/4075146.html 今天学习到jquery的hide()部分时,突然有一个想法,jquery中的隐藏/显示部分的实现是给 ...

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

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

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

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

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

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

  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#中使用Redis学习一 windows安装redis服务器端和客户端

    学习背景 今天是2015年1月2日,新年刚开始的第二天,先祝大家元旦快乐啦(迟到的祝福吧^_^).前段时间一直写Jquery插件开发系列博文,这个系列文章暂停一段时间,最近一直在看redis,我将把r ...

  2. Transaction And Lock--存在嵌套事务吗？

    在很多编程语言中,可以实现嵌套,但在TSQL中,可以实现嵌套事务吗? 答案:不可以 虽然我们可以写如下code: CREATE TABLE #TB1 ( ID INT ) --创建事务1 BEGIN ...

  3. C#文件和目录的操作

    根据文件名获取文件 /// <summary> /// 根据文件名获取文件 /// </summary> /// <param name="directory& ...

  4. Oracle 下载安装教程（doc文件）

    之前一直没有怎么接触Oracle数据库,最近公司有个项目中需要用到,所以开始折腾Oracle.刚开始走了很多弯路,为了帮助更多和我一样刚开始接触Oracle的小白,我理了一下的思路 下载地址(需要登录 ...

  5. centos 7 安装solr7.3.0 配置mysql

    1.下载solr :wget http://archive.apache.org/dist/lucene/solr/7.3.0/solr-7.3.0.tgz   或者去官网自己下:http://arc ...

  6. (1)python的基础认知

    Python程序员的信仰:人生苦短,我用python! (一)python的发展史 1989年开发的语言,创始人范罗苏姆(Guido van Rossum),别称:龟叔(Guido).为了打发圣诞节假 ...

  7. 贪心——Prim算法(避圈法)

    1.简介 Prim算法是图论中的一种算法,可在带权连通图里搜索产生最小生成树. 该算法于1930年由捷克数学家沃伊捷赫·亚尔尼克(Vojtěch Jarník)发现:并在1957年由美国计算机科学家罗 ...

  8. tcp 建立连接的三次握手，以及关闭连接的4次挥手

    TCP连接的三次握手 第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认; (客户端问服务器:你爱我吗?) 第二次握手:服务器收到syn包,必须确认客户的 ...

  9. 在iOS7中修改键盘Return键的类型

    今天将之前运行在iOS7之前的一段代码拿出来,在iOS7的机器上运行,发现键盘上的ReturnKeyType不能被修改了. 经过几番查找资料,了解到iOS7中UISearchBar的结构发生了变化,将 ...

  10. Python全栈-magedu-2018-笔记12

    第三章 - Python 内置数据结构 字典dict key-value键值对的数据的集合 可变的.无序的.key不重复 字典dict定义 初始化 d = dict() 或者 d = {} dict( ...