【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>