超轻量级的基于jquery的三级展开列表

下面我来详细讲解实现“超轻量级的基于jquery的三级展开列表”的完整攻略。实现这个功能需要以下步骤：

1. HTML结构

首先，我们需要创建一个基于HTML的列表结构，并设置每个列表项的类名称。每个列表项应该包含一个标题和一个具有子项的ul元素。请注意，我们应该在ul元素上添加一个“closed”类，以隐藏子项。

<ul class="tree">
  <li class="closed">
    <h3>Level 1 Item 1</h3>
    <ul class="tree">
      <li class="closed">
        <h4>Level 2 Item 1</h4>
        <ul class="tree">
          <li>
            <h5>Level 3 Item 1</h5>
          </li>
          <li>
            <h5>Level 3 Item 2</h5>
          </li>
        </ul>
      </li>
      <li>
        <h4>Level 2 Item 2</h4>
      </li>
    </ul>
  </li>
  <li>
    <h3>Level 1 Item 2</h3>
  </li>
</ul>

2. CSS样式

接下来，我们需要为列表项设置CSS样式，并为展开和收起的状态创建样式。我们将使用以下CSS代码：

.tree li {
  list-style: none;
}

.tree li > h3,
.tree li > h4,
.tree li > h5 {
  margin: 0;
  cursor: pointer;
}

.tree ul {
  margin: 0;
}

.tree .closed > ul {
  display: none;
}

3. jQuery代码

最后，我们需要编写一些jQuery代码，以便在每个列表项的标题被单击时切换展开状态。我们将使用以下代码：

// 在DOM加载完毕后，在所有超链接上添加一个click事件
$(document).ready(function() {
  $(".tree li > h3, .tree li > h4, .tree li > h5").click(function(event) {
    // 确定该项是否已经展开或关闭
    var isOpen = $(this).parent().hasClass("open");

    // 在所有条目上删除open类
    $(".tree li").removeClass("open");

    // 如果项当前为关闭状态，添加open类以打开它
    if (!isOpen) {
      $(this).parent().addClass("open");
    }

    // 停止处理该事件的冒泡或默认行为
    event.stopPropagation();
    event.preventDefault();
  });
});

这个jQuery代码将绑定到每个标题上，并在单击时进行切换展开状态。它首先检查当前列表项是否已经打开或关闭，然后在需要时将其添加或删除“open”类。

下面是两个展示示例：

示例1

当我们单击“Level 2 Item 1”标题时，它的子项目会显示出来。当我们单击“Level 1 Item 1”时，整个子级列表都可以折叠和展开。

示例2

当我们单击第二个标题“Level 1 Item 2”时，正文区域中会显示内容，而其子项列表没有被隐藏。