Javascript, 網頁設計

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

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

放在<head>.....</head>之間:
<script type="text/javascript" src="https://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>之間:
<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()也是一樣可把表單秀出來,為何非得用slideDownslideUp,這邊就得原諒梅干的職業病,說穿了只是因為它有滑動效果,看起來很酷,且不用寫落落長的語法就可搞定,而範例中梅干只是把下面的tr中的td合併起來,再塞一個div進去,然後控制div的開合,且只是把它藏在td之中。
[範例預覽]
UAG軍規iPhone防摔殼