今天学习到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语言和java以及安卓和苹果

    苹果手机是本地,没有中间环节,速度快,基于Linux系统 安卓是通过虚拟机,影响速度 就像c语言和java c适用于架构小的地方,因为直接编译运行 而java用于架构比较大的地方,启动慢,启动之后效率 ...

  2. Java内存模型(转载)

    本文章节: 1.JMM简介 2.堆和栈 3.本机内存 4.防止内存泄漏 1.JMM简介 i.内存模型概述 Java平台自动集成了线程以及多处理器技术,这种集成程度比Java以前诞生的计算机语言要厉害很 ...

  3. 洛谷P1501 [国家集训队]Tree II(打标记lct)

    题目描述 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 u2 v2:将树中原有的 ...

  4. Autoconf 中文手册

    Autoconf Autoconf Creating Automatic Configuration Scripts Edition 2.13, for Autoconf version 2.13 D ...

  5. opencv——阈值分割图像

    #include "stdafx.h" #include "opencv2\opencv.hpp" using namespace cv; IplImage* ...

  6. Echarts X轴内容过长自动隐藏,鼠标移动上去显示全部名称方法

    最近公司做项目,使用echarts做开发,碰到一些数据的名称很长导致图例展示的效果不是很好,自己写了一个方法,当X轴内容过长时自动隐藏,鼠标移动上去显示全部名称 样例: 图二是鼠标移动到名称显示的,怎 ...

  7. Web Server 在iis上部署webservice基于oracle

    在iis上部署webservice基于oracle 常见错误及解决方案: 原因: 先安装.netframework后安装iis造成的: 解决方案: 1.C:\Windows\Microsoft.NET ...

  8. linux和windows之间的文件压缩和解压缩以及^R的问题

    推荐大家使用zip压缩和解压,因为zip一般是linux系统自带: 一.zip和unzip 1. zip压缩 zip -r myfile.zip ./web 将当前目录里的web下的所有文件和文件夹全 ...

  9. Postman使用手册3——环境变量

    一.环境变量 当使用API的时候,你可能经常需要使用不同的设置.环境设置可以让你使用变量自定义request.这个方法可以让你轻松的在不同的设置之间改变而不用改变你的request.你不需要担心要记住 ...

  10. fdisk命令总结

    fdisk - Partition table manipulator for Linux 一.通过fdisk -l 查看机器所挂硬盘个数及分区情况: fdisk 能划分磁盘成为若干个区,同时也能为每 ...