js实现基本的树状菜单

一、实现效果

二、 html代码

  <div class="tree">
      <ul>
        <li class="treeFirst">
          <span class="caret" id="5000">规划计划</span>
          <ul class="nested">
            <li><span id="5001">年度工作计划</span></li>
          </ul>
        </li>
        <li class="treeFirst">
          <span id="5002">Node 2</span>
          <ul class="nested">
            <li>
              <span id="5003">Child 1</span>
              <ul class="nested">
                <li><span id="5004">G1</span></li>
                <li><span id="5005">G2</span></li>
              </ul>
            </li>
            <li>
              <span id="5006">Child 2</span>
              <ul class="nested">
                <li><span id="5007">G1</span></li>
                <li><span id="5008">G2</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="treeFirst">
          <span id="5009">规划计划</span>
          <ul class="nested">
            <li><span id="5010">年度工作计划</span></li>
          </ul>
        </li>
        <li class="treeFirst">
          <span id="5011">Node 2</span>
          <ul class="nested">
            <li>
              <span id="5012">Child 1</span>
              <ul class="nested">
                <li><span id="5013">Child 1</span></li>
                <li><span id="5014">Child 1</span></li>
              </ul>
            </li>
            <li>
              <span id="5015">Child 2</span>
              <ul class="nested">
                <li>
                  <span id="5016">Child 2</span>
                  <ul class="nested">
                    <li><span id="5017">Child 1</span></li>
                    <li><span id="5018">Child 1</span></li>
                  </ul>
                </li>
                <li>
                  <span id="5019">Child 2</span>
                  <ul class="nested">
                    <li><span id="5020">Child 1</span></li>
                    <li><span id="5021">Child 1</span></li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>

三、js代码（所有备注已经添加）

<script>
      // 当文档加载完成后执行以下代码
      $(document).ready(function () {
        // 对所有class为"treeFirst"的元素中的每个span元素执行以下代码
        $(".treeFirst span").each(function () {
          // 如果当前span元素的兄弟元素中有class为"nested"的ul元素
          if ($(this).siblings("ul.nested").length > 0) {
            // 给当前span元素添加class为"caret"，用于表示该元素可以展开或折叠
            $(this).addClass("caret");
          }
        });
        // 创建一个URLSearchParams对象，用于获取URL中的查询参数
        var urlParams = new URLSearchParams(window.location.search);
        // 从URL查询参数中获取名为"id"的值，并将其赋给变量id
        var id = urlParams.get("id");

        // 选取id与变量id的值匹配的元素
        $("#" + id)
          // 选取匹配元素的所有祖先元素中class为"nested"的元素
          .parents(".nested")
          // 给选取的元素添加class为"active"，用于表示该元素为展开状态
          .addClass("active")
          // 选取匹配元素的前一个class为"caret"的兄弟元素
          .prev(".caret")
          // 给选取的元素添加class为"caret-down"，用于表示该元素为展开状态
          .addClass("caret-down");

        // 对所有class为"caret"的元素添加点击事件的处理函数
        $(".caret").click(function () {
          // 切换当前点击的元素的class为"caret-down"，用于切换展开或折叠状态
          $(this).toggleClass("caret-down");
          // 切换当前点击的元素的兄弟元素中class为"nested"的元素的class为"active"，用于切换展开或折叠状态
          $(this).siblings(".nested").toggleClass("active");
        });
      });
    </script>

四、样式代码

 .tree {
        font-family: Arial, sans-serif;
      }

      .tree ul {
        list-style-type: none;
        padding-left: 20px;
      }

      .tree ul ul {
        margin-top: 5px;
        display: none;
      }

      .tree li {
        margin: 0;
        padding: 0 12px;
        line-height: 20px;
        color: #333;
        margin-top: 15px;
      }

      .tree li i {
        margin-right: 5px;
      }

      .tree li:last-child {
        padding-bottom: 5px;
      }

      .tree .caret {
        cursor: pointer;
      }

      .tree .caret::before {
        content: "";
        background-image: url("./folder.gif");
        background-repeat: no-repeat;
        background-size: contain;
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 6px;
      }

      .tree .caret-down::before {
        background-image: url("./folder_open.gif");
      }

      .tree .nested {
        display: none;
      }
      .nested li {
        text-align: left;
      }
      .tree .active {
        display: block;
      }

五、使用场景

根据传过来的id，树状保持默认展开，可作为左侧菜单使用