使用jQuery创建嵌套手风琴：能否添加锚点链接与子手风琴？

你完全能在外部jQuery手风琴中同时添加锚点链接和嵌套的内部手风琴，只需要调整HTML结构并正确初始化手风琴组件即可。

核心原理 #

jQuery UI手风琴的工作逻辑是识别**相邻的标题元素（如<h3>）和内容容器（如<div>）**作为一组手风琴项。所以只要把锚点链接放在一个独立的<div>容器里，和内部手风琴的标题-内容对并列，就能被外部手风琴正确识别。

修改后的完整代码示例 #

<div id="outer-accordion">
  <!-- 外部手风琴标题 -->
  <h3>Outer Section</h3>
  <!-- 锚点链接所在的内容容器 -->
  <div>
    <ul>
      <li><a href="https://www.google.com">外部锚点链接</a></li>
    </ul>
  </div>
  <!-- 内部手风琴的标题 -->
  <h3>Inner Section</h3>
  <!-- 内部手风琴的内容容器 -->
  <div id="inner-accordion">
    <h3>Inner Sub Section</h3>
    <div>
      <p>Inner Mauris <a href="https://www.google.com">内部锚点链接</a>.</p>
    </div>
  </div>
</div>

<script>
// 初始化外部手风琴
$("#outer-accordion").accordion({
  collapsible: true, // 可选：允许手风琴全部折叠
  active: false // 可选：初始状态全部折叠
});

// 初始化内部手风琴
$("#inner-accordion").accordion({
  collapsible: true
});
</script>

关键注意事项 #

• 确保每个<h3>标题后面紧跟对应的<div>内容容器，手风琴组件会按这个配对关系渲染
• 锚点链接所在的<div>不需要额外处理，它会作为外部手风琴的一个可展开/折叠的项存在
• 如果需要美化锚点链接的样式，可以自定义CSS（比如去掉列表默认样式、调整字体颜色等）

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