今天學習到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 });
完美解決了問題!
總結：
就像腦筋急轉彎，有時候換個思路想一想，其實問題很簡單。