layui-ul/demo/tree.html

<fieldset class="layui-elem-field layui-field-title">
  <legend>静态HTML目录</legend>
  <div class="layui-field-box">
    <div>
      直接复制html样式,需要给每个单位置顶level,然后使用js去整理一下样式
      <br>
      需要自己写出目录收缩逻辑
    </div>
    <div class="ul-tree">
      <div class="ul-tree-item">
        <div class="ul-tree-item-info">
          <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
          <span class="ul-tree-item-title">读书笔记</span>
        </div>
        <div class="ul-tree-item-children">
          <div class="ul-tree-item">
            <div class="ul-tree-item-info current">
              <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
              <span class="ul-tree-item-title">小说</span>
            </div>
            <div class="ul-tree-item-children">

            </div>
          </div>
        </div>
      </div>
      <div class="ul-tree-item">
        <div class="ul-tree-item-info">
          <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
          <span class="ul-tree-item-title">技术笔记</span>
        </div>
        <div class="ul-tree-item-children">
          <div class="ul-tree-item">
            <div class="ul-tree-item-info">
              <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
              <span class="ul-tree-item-title">Mysql</span>
            </div>
            <div class="ul-tree-item-children">

            </div>
          </div>
          <div class="ul-tree-item">
            <div class="ul-tree-item-info">
              <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
              <span class="ul-tree-item-title">PHP</span>
            </div>
            <div class="ul-tree-item-children">
              <div class="ul-tree-item">
                <div class="ul-tree-item-info">
                  <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
                  <span class="ul-tree-item-title">扩展</span>
                </div>
                <div class="ul-tree-item-children">

                </div>
              </div>
              <div class="ul-tree-item">
                <div class="ul-tree-item-info">
                  <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
                  <span class="ul-tree-item-title">框架</span>
                </div>
                <div class="ul-tree-item-children">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <pre class="layui-code demo-js"></pre>
      <script class="demo-js-src">
        // 可以用以下代码整理元素
        $('.ul-tree-item').each(function () {
          var itemTree = this
          var parents = $(itemTree).parents('.ul-tree-item')
          var level = parents.length
          $(itemTree).find('.ul-tree-item-title').css('margin-left', (level + 1) * 15 + 5 + 'px')
          $(itemTree).find('.ul-tree-item-icon').css('left', (level + 1) * 15 - 15 + 'px')

          if ($(itemTree).children('.ul-tree-item-children').children().length == 0) {
            $(itemTree).children('.ul-tree-item-info').find('.ul-tree-item-icon').remove()
          }

          $(itemTree).children('.ul-tree-item-info').click(function (e) {
            if ($(e.target).hasClass('ul-tree-item-icon')) {
              var iconItem = e.target
              if ($(iconItem).hasClass('layui-icon-triangle-d')) {
                // 收缩
                $(iconItem).removeClass('layui-icon-triangle-d')
                $(iconItem).addClass('layui-icon-triangle-r')

                $(itemTree).children('.ul-tree-item-children').hide()
              } else {
                // 展开
                $(iconItem).addClass('layui-icon-triangle-d')
                $(iconItem).removeClass('layui-icon-triangle-r')

                $(itemTree).children('.ul-tree-item-children').show()
              }
              console.log('点击收缩目录');
              // 一般不用写这个逻辑
            }else{
              console.log('点击目录项');
              // 在这里写点击逻辑
            }
          })

        })


      </script>
    </div>
  </div>
</fieldset>
<fieldset class="layui-elem-field layui-field-title">
  <legend>基本组件</legend>
  <div class="layui-field-box">
    <div>
      最基本的组件,ul-tree-item-icon的按钮会在执行js后进行相应的移除,缩进样式也许需要执行js
    </div>
    <div class="ul-section">
      <div class="ul-tree">
        <div class="ul-tree-item">
          <div class="ul-tree-item-info">
            <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
            <span class="ul-tree-item-title">读书笔记</span>
          </div>
          <div class="ul-tree-item-children">
  
          </div>
        </div>
  
      </div>
    </div>
    <div class="ul-section">
      <div class="ul-tree">
        <div class="ul-tree-item">
          <div class="ul-tree-item-info">
            <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
            <span class="ul-tree-item-title">读书笔记</span>
          </div>
          <div class="ul-tree-item-children">
            <div class="ul-tree-item">
              <div class="ul-tree-item-info">
                <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
                <span class="ul-tree-item-title">小说</span>
              </div>
              <div class="ul-tree-item-children">
  
              </div>
            </div>
          </div>
        </div>
  
      </div>
    </div>
    <pre class="layui-code demo-js"></pre>
    <div class="demo-js-src">
      <!-- 基本组件 -->
      <div class="ul-tree">
        <div class="ul-tree-item">
          <div class="ul-tree-item-info">
            <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
            <span class="ul-tree-item-title">读书笔记</span>
          </div>
          <div class="ul-tree-item-children">

          </div>
        </div>

      </div>
      <!-- 子目录只需要将ul-tree-item嵌套在ul-tree-item-children即可 -->
      <div class="ul-tree">
        <div class="ul-tree-item">
          <div class="ul-tree-item-info">
            <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
            <span class="ul-tree-item-title">读书笔记</span>
          </div>
          <div class="ul-tree-item-children">
            <div class="ul-tree-item">
              <div class="ul-tree-item-info">
                <i class="ul-tree-item-icon layui-icon layui-icon-triangle-d"></i>
                <span class="ul-tree-item-title">小说</span>
              </div>
              <div class="ul-tree-item-children">

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</fieldset>