Javascript » jQuery教學－Table折疊使用滑動slideDown&slideUp效果

jQuery教學－Table折疊使用滑動slideDown&slideUp效果

分類：Javascript | 發表日:2009-11-09 | 瀏覽：11,282 views

加入書籤：

梅問題-jQuery教學-折疊滑動表單slideDown&UP for Table

　　最近可能各位有發現到，梅干比較少發文，回應的速度也慢了下來，難道梅干要廢站了嗎？呵～當然不是，而是梅干最近正在自製購物車，並把購物車跟Wordpress結合起來，呼！到今天總算有點進展了，在這過程中還遇到了不少奇怪的問題，好在有好友男丁大力的相助下，解決了梅干不少的問題，今天要與各位來分享一個jQuery的怪狀況，雖然有不少人說table已死，但對於表單依然還是table的天下，但jQuery對於table的支援又有些弱，今天若要點選編號，才秀出該筆訂單的明細時，只可用show、hide，若想使用slideDown、slideUp則會發現表格大亂，因此為了達到梅干的想要的效果，梅干就作了點修正，讓在table下也可使用slideDown、slideUp。

放在＜head＞.....＜/head＞之間：

^?View Code JAVASCRIPT

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
	$(function(){
		$("a").click(function(){	
			var _this= $(this).attr("href");					
			if($(_this).css("display")=="none"){
				$(_this).slideDown();
				$(this).html("-");
			}else{
				$(_this).slideUp();
				$(this).html("+");
			}			
			return false;			
		});		
	});
</script>
<style type="text/css">
body{font-size:12px;}
a{
	color:#333333;
	text-decoration: none;
	font-size:15px;
	display:block;
}
table tr td{border:solid 1px #ccc;}
div{padding:10px 30px;}
</style>

放在＜body＞.....＜/body＞之間：

^?View Code HTML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<table width="500" border="0" cellspacing="0" cellpadding="0">
		<tr>
		  <td width="26" align="center" bgcolor="#eeeeee"><a href="#tr1">+</a></td>
		  <td width="474">　訂單01</td>
	  </tr>
	  <tr>
		  <td colspan="2" class="content">
          	<div id="tr1" style="display:none;">訂單01明細內容</div>
          </td>
    </tr>
	   <tr>
			<td align="center" bgcolor="#eeeeee"><a href="#tr2">+</a></td>
			<td>　訂單02</td>
	</tr>
		<tr>
			<td colspan="2" class="content">
            	<div id="tr2" style="display:none;">訂單02明細內容</div>
            </td>
		</tr>
  </table>

　　雖然說用show()、hide()也是一樣可把表單秀出來，為何非得用slideDown、slideUp，這邊就得原諒梅干的職業病，說穿了只是因為它有滑動效果，看起來很酷，且不用寫落落長的語法就可搞定，而範例中梅干只是把下面的tr中的td合併起來，再塞一個div進去，然後控制div的開合，且只是把它藏在td之中。

[範例預覽]