jQuery实现文档树效果_网络技术_宿州市腾雀网络科技有限公司

jQuery实现文档树效果

发布时间 - 2026-01-10 23:11:07 点击率：次

情形：本类别下面有好多子类别，每个子类别下面又有好多孙类别；需求：当点击本类别时，子类别如果是显示的就让它隐藏，子类别如果是隐藏的就让它显示。

效果如下：

图（1）点击前

图（2）点击后

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
   list-style: none;
  }
  .box{
   width: 250px;
   height: auto;
   padding: 20px;
   background: lightgrey;
   margin:0 auto;
  }
  .box li{
   line-height: 30px;
   /*注意：height没有被设置，可以根据实际需要自动调整*/
   position: relative;
  }
  .box li em{
   position: absolute;
   left:0;
   top:7px;
   width: 16px;
   height: 16px;
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=123b5048273b92eb544ad6eb0ed57c44");
   background-size:100%;
   cursor: pointer;
  }
  .box li em.open{
   background-image: url("http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=8f89447399822b0294ae590ccc641bf5");
   background-size:100%;
  }
  .box li span{
   padding-left: 20px;
   /*因为span前面的em已经绝对定位，脱离文档流了，所以span的左边界直达 li*/
  }
  .box ul{
   display: none;
  }
  .two{
    margin-left: 20px;
  }
  .three{
   margin-left: 40px;
  }
  .four{
   margin-left: 40px;
  }
  /*ul.box下的li显示，其中有折叠的li加em；
   ul.box下的ul隐藏，其内部的li是没法显示的*/
 </style>
</head>
<body>
<ul class="box">
 <li><em></em><span>第一级第一个</span>
  <ul class="two">
   <li><span>第二级第一个</span></li>
   <li><em></em><span>第二级第二个</span>
    <ul class="three">
     <li><em></em><span>第三级第一个</span>
      <ul class="four">
       <li><span>第四级第一个</span></li>
       <li><span>第四级第二个</span></li>
      </ul>
     </li>
     <li><span>第三级第二个</span></li>
    </ul>
   </li>
   <li><em></em><span>第二级第三个</span>
    <ul class="three">
     <li><span>第三级第一个</span></li>
     <li><span>第三级第二个</span></li>
    </ul>
   </li>
  </ul>
 </li>
 <li><em></em><span>第一级第一个</span>
  <ul class="two">
   <li><span>第二级第一个</span></li>
   <li><em></em><span>第二级第二个</span>
    <ul class="three">
     <li><em></em><span>第三级第一个</span>
      <ul class="four">
       <li><span>第四级第一个</span></li>
       <li><span>第四级第二个</span></li>
      </ul>
     </li>
     <li><span>第三级第二个</span></li>
    </ul>
   </li>
  </ul>
 </li>
</ul>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 /*思路：
 * 1.让前面有em的span加上小手效果；
 * 2.点击span or em的时候，看他父容器下是否有ul,如果有，让其显示，否则，隐藏
 * */
 var $box=$('.box');
 var $aSpan=$box.find('span');
 //1.让前面有em的span加上小手效果；
 $aSpan.each(function(index,item){
  //if($(item).prev().length){ $(item).css('cursor','pointer');};思路1:
  $(item).prev('em').next('span').css('cursor','pointer'); //思路2:
 });
 //2.点击span or em的时候，看他父容器下是否有ul,如果有，让其显示，否则，隐藏
 $box.click(function(e){
  //当点击的事件源是em or span的时候，我们看其父级下是否有ul
  // 如果有：展开让其闭合，闭合就让其展开；
  if(e.target.tagName.toLowerCase()=='em' || e.target.tagName.toLowerCase()=='span'){
   var $parent=$(e.target).parent();
   var $ul=$parent.children('ul');
   if($ul){
    if($ul.css('display')=='block'){//展开，让其闭合
     //当闭合的时候，让当前容器下，所有的em都移除open,所有的ul都隐藏；
     $parent.find('ul').hide();
     $parent.find('em').removeClass('open');
    }else{ //闭合让其展开
     $ul.show();
     $parent.children('em').addClass('open');
    }
   }
  }
 })
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# jquery # 文档树 # jquery树形菜单 # 目录树 # jQuery仿写百度百科的目录树 # jquery实现的树形目录实例 # jQuery遍历节点树方法分析 # jQuery树形控件zTree使用小结 # 多功能jQuery树插件zTree实现权限列表简单实例 # jquery树形菜单效果的简单实例 # jQuery zTree加载树形菜单功能 # jquery实现树形菜单完整代码 # 轻松学习jQuery插件EasyUI EasyUI创建树形菜单 # jquery插件treegrid树状表格的使用方法详解（.Net平台） # 第一个 # 第二个 # 让其 # 四级 # 看他 # 让它 # 又有 # 第三个 # 可以根据 # 流了 # 移除 # 看其 # 文档 # 其中有 # 有好多 # px # width # height # auto # background

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：天津先进网络营销大全公司,长护险销售好做吗？

下一篇：laravel怎么判断是否是post传输

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：天津先进网络营销大全公司,长护险销售好做吗？

下一篇：laravel怎么判断是否是post传输