如何实现点击.top元素跳转锚点并显示对应.sub子项的折叠目录？

我们可以通过CSS配合JavaScript来实现需求：默认隐藏子标题，点击.top项时，既跳转到对应锚点，又切换其下方.sub项的显示状态。

实现步骤 #

1. 添加基础样式 #

首先用CSS默认隐藏所有子项，并给可点击的.top项添加交互提示：

/* 默认隐藏所有子标题 */
.sub {
  display: none;
  margin-left: 20px; /* 子项缩进，提升可读性 */
}

/* 显示状态的子标题 */
.sub.active {
  display: list-item;
}

/* 给.top项添加点击提示 */
.top {
  cursor: pointer;
  font-weight: bold;
}

/* 可选：给.top添加箭头标识，区分可折叠项 */
.top::before {
  content: "+ ";
  font-weight: normal;
}
.top.expanded::before {
  content: "- ";
}

2. 编写交互逻辑 #

通过JavaScript监听.top项的点击事件，控制对应子项的显示/隐藏：

document.addEventListener('DOMContentLoaded', function() {
  const topItems = document.querySelectorAll('.top');
  
  topItems.forEach(item => {
    item.addEventListener('click', function() {
      // 切换当前.top的展开状态
      this.classList.toggle('expanded');
      
      // 获取当前项之后的所有元素，直到下一个.top为止
      let nextElement = this.nextElementSibling;
      while (nextElement && !nextElement.classList.contains('top')) {
        if (nextElement.classList.contains('sub')) {
          nextElement.classList.toggle('active');
        }
        nextElement = nextElement.nextElementSibling;
      }
    });
  });
});

完整整合示例 #

把样式和脚本整合到你的HTML结构中：

<div class="Wrapper">
  <ul class="autocontents" id="kcmenu">
    <li class="top"><a href="#anchor1">Title 1</a></li>
    <li class="sub sub_1"><a href="#subAnchor1-1">SubTitle 1-1</a></li>
    <li class="sub sub_1"><a href="#subAnchor1-2">SubTitle 1-2</a></li>
    <li class="top"><a href="#anchor2">Title 2</a></li>
    <li class="sub sub_1"><a href="#subAnchor2-1">SubTitle 2-1</a></li>
    <li class="sub sub_1"><a href="#subAnchor2-2">SubTitle 2-2</a></li>
    <li class="sub sub_1"><a href="#subAnchor2-3">SubTitle 2-3</a></li>
    <li class="top"><a href="#anchor3">Title 3</a></li>
    <li class="sub sub_1"><a href="#subAnchor3-1">SubTitle 3-1</a></li>
    <li class="sub sub_1"><a href="#subAnchor3-2">SubTitle 3-2</a></li>
  </ul>
</div>

<style>
.sub {
  display: none;
  margin-left: 20px;
}
.sub.active {
  display: list-item;
}
.top {
  cursor: pointer;
  font-weight: bold;
}
.top::before {
  content: "+ ";
  font-weight: normal;
}
.top.expanded::before {
  content: "- ";
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const topItems = document.querySelectorAll('.top');
  
  topItems.forEach(item => {
    item.addEventListener('click', function() {
      this.classList.toggle('expanded');
      
      let nextElement = this.nextElementSibling;
      while (nextElement && !nextElement.classList.contains('top')) {
        if (nextElement.classList.contains('sub')) {
          nextElement.classList.toggle('active');
        }
        nextElement = nextElement.nextElementSibling;
      }
    });
  });
});
</script>

说明：点击.top项时，会自动切换其下方所有.sub项的显示状态，同时<a>标签的默认锚点跳转行为不受影响，完全满足你的需求。

内容的提问来源于stack exchange，提问作者sem roijackers