jquery实现移动端多级树形样式

最新推荐文章于 2024-04-04 15:51:19 发布

backwriter

最新推荐文章于 2024-04-04 15:51:19 发布

阅读量2.4k

点赞数

文章标签： javascript html5 jquery

本文链接：https://blog.csdn.net/backwriter/article/details/105202251

版权

要在老的移动端项目上实现一个树形展示数据的功能，按照惯例先去网上偷一下别人的成果，翻了好久都没有找到合适的，好吧，自己动手撸吧

先上效果图（Ps：没有设计稿，自己凭空想象出来的，非专业前端将就着看吧）

上代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title></title>
  <meta name="viewport" content="initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" href="/favicon.ico">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">

  <link rel="stylesheet" href="css/style.css">
  <style type="text/css">
    #treeData {
      padding-left: 0;
      border-bottom: 1px solid #e7e7e7;
    }
    #treeData ul {
      padding-left: 0;
    }
    .tree-item{
      list-style-type: none;
      border-top: 1px solid #e7e7e7;
      line-height: 35px
    }
    .item-content{
      display: block;

    }
    .tree-title{
      display: block;
    }
    .tree-icon {
      border-radius: 50%;
      height: 20px;
      width: 20px;
      display: inline-block;
      background: #0894ec;
      vertical-align: center;
      margin-right: 5px;
    }
    .tree-icon i {
      display: block;
      color: #FFFFFF;
      height: 20px;  
      line-height: 20px;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="page-group">
    <!-- 单个page ,第一个.page默认被展示-->
    <div class="page page-current">
        <!-- 这里是页面内容区 -->
        <h1 class="page-title page-title" style="background-color: #0894ec">学习资料</h1>
        <div class="content" style="background-color: #ffffff">
          <ul id="treeData">
          </ul>
        </div>
    </div>
</div>


<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>

<script type="text/javascript">
  var json = [
    {
      "name": "专科",
      "children": [
        {
          "name": "10.建设工程管理",
          "children": [
            {
              "name": "2412基础写作",
              "children": [
                {
                  "name": "2018012412.pdf",
                  "url": "http://www.baidu.com"
                },
                {
                  "name": "2018072412.pdf",
                  "url": "http://www.baidu.com"
                },
                {
                  "name": "2019012412.pdf",
                  "url": "http://www.baidu.com"
                },
                {
                  "name": "2019072412.pdf",
                  "url": "http://www.baidu.com"
                }
              ]
            }
          ]
        }
      ]
    }  
  ]

  $(function(){
    var list = parseJson(json,0);
    for(var i=0;i<list.length;i++){
      $('#treeData').append(list[i])
    }

    $('.tree-title').on('click', function(event){
      $(this).next().toggle();
      var icon = $(this).children('.tree-icon').children('i');
      if (icon.text()==='-'){
        icon.text('+');
      } else {
        icon.text('-');
      }
    });
  });

  function parseJson (data, level) {
    var lis  = [];
    var index = level + 1
    for(var i=0;i<data.length;i++){
      var item = data[i]
      var rootLi = $('<li></li>');
      rootLi.addClass('tree-item')
      if (item.children && item.children.length > 0) {
        var div = $('<div></div>')
        var icon = $('<span></span>')
        icon.addClass('tree-icon')
        icon.append($('<i></i>').text('-'))
        div.append(icon)
        var span = $('<span></span>');
        span.text(item.name);
        div.addClass('tree-title');
        div.css("padding-left", index+"9px");
        div.append(span)
        var ul = $('<ul></ul>');
        rootLi.append(div)
        var subLi = parseJson(item.children, index);
        for(var j = 0;j<subLi.length;j++) {
          ul.append(subLi[j])
        }
        rootLi.append(ul)
      } else {
        if (item.url) {
          var a = $('<a></a>');
          a.text(item.name);
          a.attr('href', item.url);
          a.attr('target',"_blank");
          a.addClass('item-content');
          a.css("padding-left", index+"9px");
          rootLi.append(a)
        } else {
          var span = $("<span></span");
          span.text(item.name);
          span.addClass('item-content');
          span.css("padding-left", index+"9px");
          rootLi.append(span);
        }
      }
      lis.push(rootLi)
    }
    return lis;
  };

</script>
</body>
</html>

有几个依赖js就不传了，其实只要jquery就行了，我只是偷懒拿旧页面改的，样式自己再调吧。

理论上可以支持多级的，我试了四级是没有问题的，代码写的有点烂，非专业前端，见谅！

backwriter

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery实现移动端多级树形样式

要在老的移动端项目上实现一个树形展示数据的功能，按照惯例先去网上偷一下别人的成果，翻了好久都没有找到合适的，好吧，自己动手撸吧先上效果图（Ps：没有设计稿，自己凭空想象出来的，非专业前端将就着看吧）上代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <met...
复制链接

扫一扫