【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的演示）