jquery手风琴

html源码

<dl id="Menu"><dt class="oncur cur">主页</dt><dd class="menu_body">
<ul>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">主界面</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">修改密码</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">代理商充值</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">查询充值记录</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">用户管理</a></li>
</ul>
</dd><dt class="cur">报表统计</dt><dd class="menu_body">
<ul>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">按日统计</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">按月统计</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">按通道统计</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">按代理商统计</a></li>
</ul>
</dd><dt class="cur">益智乐园</dt><dd class="menu_body">
<ul>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">管理分组</a></li>
<li><a href="http://www.cnblogs.com/liuqungs/admin/" target="mainFrame">管理项目</a></li>
</ul>
</dd></dl>

js源码

<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#Menu dd:eq(0)").show();
//点击触发
$("#Menu dt").click(function () {
$(this).toggleClass("oncur").next("dd").slideToggle(300).siblings("dd").slideUp("slow");
$(this).siblings("dt").removeClass("oncur");
$(this).siblings("dt").addClass("cur");
});

});

</scprit>

posted @ 2013-07-11 12:29  清晓zzz  阅读(150)  评论(0编辑  收藏  举报