欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-14 18:53:10
...

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>