【jquery】切换标题与内容/点击后动态切换当前状态

点击此处下载整个演示（包含html的演示与php的演示）

默认效果：

鼠标移上：

点击后，状态不变：

核心代码：

 1 <script type="text/javascript"> 
 2 $(function(){
 3 $('.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')}});
 4 var chose=$("a[href=?cid=<?=$cid;?>]");
 5 chose.addClass("this");
 6 chose.closest('ul').prev().find('.open').attr("class","close");
 7 var chosediv=chose.parent().parent().parent().parent().attr('id');
 8 $('#'+chosediv).animate({height:$(('#'+chosediv).replace('b','')).innerHeight()+'px'},500);
 9 });
10 </script>

<div class="shopmenubox" ></div>
</ul>
</div>
</div>

<div class="shopmenubox" ></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的演示）