当前位置: 代码迷 >> JavaScript >> 【JS常用效果】jquery实现dl dt dd菜单展开收起效果(1.4以上版本)
  详细解决方案

【JS常用效果】jquery实现dl dt dd菜单展开收起效果(1.4以上版本)

热度:171   发布时间:2012-08-29 08:40:14.0
【JS常用效果】jquery实现dl dt dd菜单展开收起效果(1.4以下版本)

JScode:

//导入jquery库

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
?? $(document).ready(function()
?? {
??? $("#mymenu dd").hide();
??? $("#mymenu dt").each(function(){
??var dt = $(this);
?
??//找到dt下的dd
??var objList =new Array();
??var tmpDD = dt.next();
??//循环查找dt下的所有dd,并且不查找下一个dt的内容
??while(tmpDD.attr("tagName")!=null && tmpDD.attr("tagName")!="DT")
??{
???//push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
???objList.push(tmpDD);
???//循环添加获取到的dd元素
???tmpDD = tmpDD.next();
??}
??//alert(dt.html()+" 有:"+objList.length+"个dd");
?
??dt.toggle(
???function(){
???$(objList).each(function(){
???$(this).show();
???});
??},
??
??function(){
???$(objList).each(function(){
???$(this).hide();
???});
???}
??);
?
??});

?? });
</script>

?

HTMLCode:

<div id="mymenu">
????? <dl>
??????? <dt><a href="#">用户管理</a></dt>
??????? <dd><a href="#">用户查询</a></dd>
??????? <dd><a href="#">添加用户</a></dd>
??????? <dd><a href="#">用户组</a></dd>
??????? <dt><a href="#">课程管理</a></dt>
??????? <dd><a href="#">课程列表</a></dd>
??????? <dd><a href="#">添加课程</a></dd>
???? </dl>
?? </div>

?

  相关解决方案