【jquery】切換標題與內容/點擊后動態切換當前狀態

點擊此處下載整個演示（包含html的演示與php的演示）

默認效果：

鼠標移上：

點擊后，狀態不變：

核心代碼：

<script type="text/javascript"> 
$(function(){
$('.open').click(function(){if($(this).attr('class')=='open'){$('#b'+$(this).attr("id").replace('a_','')).animate({height:$('#'+$(this).attr("id").replace('a_','')).innerHeight()+'px'},500);$(this).attr('class','close')}else{$('#b'+$(this).attr("id").replace('a_','')).animate({height:'36px'},500);$(this).attr('class','open')}});
var chose=$("a[href=?cid=<?=$cid;?>]");
chose.addClass("this");
chose.closest('ul').prev().find('.open').attr("class","close");
var chosediv=chose.parent().parent().parent().parent().attr('id');
$('#'+chosediv).animate({height:$(('#'+chosediv).replace('b','')).innerHeight()+'px'},500);
});
</script>

<div class="shopmenubox" id="bjjinfo_1">
<div id="jjinfo_1">
<div class="shopCenter"><a href="javascript:void(0)" class="open" id="jjinfo_a_1">男女鞋服</a></div>
<ul>
<li><a href="?cid=14">女裝/流行女裝</a></li>
<li><a href="?cid=37">男裝</a></li>
<li><a href="?cid=1014">女士內衣/男士內衣/家居服</a></li>
<li><a href="?cid=1056">女鞋</a></li>
<li><a href="?cid=1082">流行男鞋/皮鞋</a></li>
<li><a href="?cid=1106">運動鞋</a></li>
<li><a href="?cid=1153">運動服</a></li>
<div class="clear"></div>
</ul>
</div>
</div>

<div class="shopmenubox" id="bjjinfo_2">
<div id="jjinfo_2">
<div class="shopCenter"><a href="javascript:void(0)" class="open" id="jjinfo_a_2">箱包配飾</a></div>
<ul>
<li><a href="?cid=23">珠寶/鑽石/翡翠/黃金</a></li>
<li><a href="?cid=31">箱包皮具/熱銷女包/男包</a></li>
<li><a href="?cid=1040">ZIPPO/飾品/眼鏡</a></li>
<li><a href="?cid=1044">品牌手表/流行手表</a></li>
<li><a href="?cid=1154">服飾配件/皮帶/帽子/圍巾</a></li>
<li><a href="?cid=1054">流行首飾/時尚飾品</a></li>
<div class="clear"></div>
</ul>
</div>
</div>

<style>
body{ font-size:12px;}
a{ text-decoration:none;}
.shopCenter{width:185px; margin:0 auto;}
.shopCenter a{width:185px; text-indent:10px;display:block;height:36px; outline:none;}

.shopCenter a.open{margin:0 auto; color:#686868;font:normal 14px/36px "微軟雅黑";background:url(images/shop_dot.gif) no-repeat 150px -58px;}
.shopCenter a.open:hover {color:#ff5500;font:normal 14px/36px"微軟雅黑";background:url(images/shop_dot.gif) no-repeat 150px -21px; text-decoration:none;}
.shopCenter a.close{color:#ff5500;font:normal 14px/36px "微軟雅黑";background:url(images/shop_dot.gif) no-repeat 150px -95px;text-decoration:none;}
.shopCenter a.close:hover {color:#686868;font:normal 14px/36px "微軟雅黑";background:url(images/shop_dot.gif) no-repeat 150px 18px;text-decoration:none;}
.shopCenter a:visited:{width:185px; text-indent:10px;display:block;height:36px; outline:none;font:normal 14px/36px "微軟雅黑";color:#ff5500;}

.shopmenubox{ width:204px; height:34px; overflow:hidden;}
.shopmenubox ul{width:185px;margin:0 auto;display:block;background:#f6f6f6; padding:7px 0;}
.shopmenubox ul li{ width:185px; height:26px;line-height:26px;}
.shopmenubox ul li a{ color:#666;width:185px; height:26px; display:block;text-indent:10px;}
.shopmenubox ul li a:hover,.this{ background:#e5e5e5; text-decoration:none; color:#ff5500;}
</style>

 

往下增加分類，復制shopmenubox層，把里面的3個id的數字修改即可。

點擊此處下載整個演示（包含html的演示與php的演示）