您当前的位置:首页 > 资源分享 > 实用资源 实用资源

js+jquery实现树状目录

caster2019-05-21 15:30:13 实用资源 人已围观

简介前端js+jQuery实现一个树状目录

依赖jquery需要先导入jquery

style样式

<style>
    ul,
    li,
    i {
      list-style: none;
      padding: 0;
      margin: 0;
      font-style: normal;
    }
    i {
      width: 14px;
      height: 14px;
      float: left;
    }
    .box {
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
    }
    .nav-ml {
      width: 100%;
    }
    .nav-ml ul {
      margin-left: 20px;
    }
    .nav-ml i {
      width: 14px;
      height: 14px;
      background: url(images/add.png) no-repeat 0 0;
      margin-right: 10px;
    }
    .nav-ml i.unfold {
      width: 14px;
      height: 14px;
      background: url(images/minus.png) no-repeat 0 0;
    }
    .nav-ml a {
      display: block;
      font-size: 14px;
      height: 20px;
      padding: 3px 0;
      color: #666;
      overflow: hidden;
    }
    .nav-first,
    .nav-second,
    .nav-three {
      margin-left: 20px;
    }
    .nav-three li {
      background: url(images/dot.png) no-repeat 0 12px;
      padding-left: 10px;
    }
    .fold {
      display: none;
    }
    .nav-three li:hover {
      background-color: #fffceb;
    }
  </style>

html内容

 <div class="wrapper">
      <div class="nav-ml">
        <ul>
          <li>
            <ul class="nav-first">
              <li>
                <a class="item-1"><i></i>文书档案</a>
                <ul class="nav-second fold ">
                  <li>
                    <a class="item-2"><i></i>行政工作</a>
                    <ul class="nav-three fold">
                      <li><a>2019年行政工作行政财务报告</a></li>
                      <li><a>2019年行政工作行政财务报告</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <ul class="nav-first">
              <li>
                <a class="item-1"><i></i>会计档案</a>
                <ul class="nav-second fold ">
                  <li>
                    <a class="item-2"><i></i>会计工作</a>
                    <ul class="nav-three fold">
                      <li><a>报告</a></li>
                      <li><a>报告</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <ul class="nav-first">
              <li>
                <a class="item-1"><i></i>资产档案</a>
                <ul class="nav-second fold ">
                  <li>
                    <a class="item-2"><i></i>资产工作</a>
                    <ul class="nav-three fold">
                      <li><a>报告</a></li>
                      <li><a>报告</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <ul class="nav-first">
              <li>
                <a class="item-1"><i></i>文件档案</a>
                <ul class="nav-second fold ">
                  <li>
                    <a class="item-2"><i></i>文件工作</a>
                    <ul class="nav-three fold">
                      <li><a>报告</a></li>
                      <li><a>报告</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <ul class="nav-first">
              <li>
                <a class="item-1"><i></i>设备档案</a>
                <ul class="nav-second fold ">
                  <li>
                    <a class="item-2"><i></i>设备工作</a>
                    <ul class="nav-three fold">
                      <li><a>报告</a></li>
                      <li><a>报告</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>

script

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script language="javascript">
    var tree = [
      {
        text: "文书档案 1",
        nodes: [
          {
            text: "子节点 1",
            nodes: [
              {
                text: "孙节点 1",
                nodes: [
                  {
                    text: "子节点 1"
                  },
                  {
                    text: "子节点 2"
                  }
                ]
              },
              {
                text: "子节点 2"
              }
            ]
          },
          {
            text: "子节点 2"
          }
        ]
      },
      {
        text: "文书档案 2"
      },
      {
        text: "文书档案 3"
      },
      {
        text: "文书档案 4"
      },
      {
        text: "文书档案 5"
      }
    ];
    // 树点击事件
    $(".item-1").click(function() {
      $(this)
        .parent()
        .find(".nav-second")
        .slideToggle(500);
      $(this)
        .children("i")
        .toggleClass("unfold");
    });
    $(".item-2").click(function() {
      $(this)
        .parent()
        .find(".nav-three")
        .slideToggle(500);
      $(this)
        .children("i")
        .toggleClass("unfold");
    });

  </script>

文章评论

打赏

  • 如果你觉得本站很棒,可以通过扫码支付打赏哦!
  • 微信扫码:你说多少就多少~
  • 支付宝扫码:你说多少就多少~