今天学习到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");
});
});
完美解决了问题!
总结：
就像脑筋急转弯，有时候换个思路想一想，其实问题很简单。