如何在Accordion组件内实现内容锚点定位？

原代码失效原因：折叠面板默认是display:none的隐藏状态，浏览器无法定位隐藏元素，导致锚点跳转无效。以下是无需JavaScript的解决方法：

修改后的完整代码 #

内嵌样式（可直接放在HTML的<head>标签内） #

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

/* 核心规则：当锚点指向目标内容时，自动展开所在面板 */
.panel:has(#Anchor) {
  display: block;
}

HTML结构 #

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 把上面的CSS代码粘贴到这里 */
</style>
</head>
<body>

<h2>折叠面板</h2>

<p><a href="#Anchor">跳转到第2节的指定段落</a></p>

<button class="accordion">第1节</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">第2节</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
  <p id="Anchor">跳转到这里的内容<br> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">第3节</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

兼容性替代方案 #

如果你的CMS或浏览器不支持:has()伪类，可改用以下方式：

1. 给第2节的面板添加专属ID：<div class="panel" id="section2-panel">
2. 修改CSS规则：

#section2-panel:target {
  display: block;
}

3. 调整锚点链接：<a href="#section2-panel">跳转到第2节的指定段落</a>
   若需要精确到内部段落，可在目标段落前添加空锚点：<span id="Anchor"></span>，并将链接改为<a href="#Anchor">，同时保留面板的:target规则。

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