如何使用 jQuery 通过链接控制手风琴（Accordion）的展开与收起-html教程-PHP中文网

如何使用 jQuery 通过链接控制手风琴（Accordion）的展开与收起

本文详解如何用 jQuery 实现点击外部链接触发手风琴面板的准确展开/收起，重点解决因混淆 .attr() 与 .prop() 导致的状态不同步问题，并提供可复用的健壮代码方案。

本文详解如何用 jquery 实现点击外部链接触发手风琴面板的准确展开/收起，重点解决因混淆 `.attr()` 与 `.prop()` 导致的状态不同步问题，并提供可复用的健壮代码方案。

在构建交互式页面时，常需通过独立按钮或链接（如“Read more”）控制手风琴组件的开关状态。但若直接操作 DOM 属性而不区分语义，极易引发状态错乱——典型表现是：首次点击链接可展开，手动点击标题可收起；但再次点击同一链接时，面板却无法关闭，表面“失效”。根本原因在于： 的 checked 状态属于 DOM 属性（property），而非静态 HTML 属性（attribute）。

✅ 正确做法：始终使用 .prop() 操作表单状态

jQuery 中：

.attr('checked', true) 修改的是 HTML 标签中 checked 属性的字符串值（如），不反映真实交互状态；
.prop('checked', true) 直接设置 DOM 元素的 checked 布尔属性，同步更新浏览器内部状态和视觉反馈，确保 CSS 选择器 :checked 生效。

因此，修复关键仅需两处调整：

为链接添加 data-id，实现动态目标绑定

<a href="#" data-id="1" class="button">Read more title 1</a>
<a href="#" data-id="2" class="button">Read more title 2</a>

使用 .prop() 设置 checkbox 状态，并移除冗余内联样式

jQuery 1.12.4
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载
```
$("a.button").on("click", function(e) {
  e.preventDefault();
  const targetId = $(this).data('id');
  // 清除所有已选状态（可选：实现单选模式）
  $(".accordion-wrapper input").prop('checked', false);
  // 设置目标项为选中
  $(`.accordion-wrapper input[id="${targetId}"]`).prop('checked', true);
});
```

⚠️ 注意：原代码中 $(".accordion-wrapper div:nth-child(1) article").attr('style', 'max-height:inherit;') 是危险写法——它绕过 CSS 规则，强行注入内联样式，破坏 :checked ~ article 的声明式控制，且无法被后续 .prop() 触发的 CSS 过渡覆盖。应完全交由 CSS 控制显隐逻辑，JS 仅负责状态切换。

完整可运行示例



  <style>
    .accordion-wrapper { margin: 2rem 0; }
    .accordion-wrapper > div { margin: 1rem 0; }
    .accordion-wrapper article {
      background: rgba(255, 255, 255, 0.25);
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.3s ease-in-out;
      border: 1px solid #eee;
      padding: 0 15px;
      border-top: none;
    }
    .accordion-wrapper label {
      display: block;
      cursor: pointer;
      color: #777;
      font-size: 1.1em;
      background: #eeeeee;
      padding: 10px 15px;
      border: 1px solid #eee;
      border-bottom: 1px solid transparent;
    }
    .accordion-wrapper input:checked ~ article {
      max-height: 500px; /* 足够容纳内容的合理值，避免 inherit 导致过渡失效 */
    }
    .accordion-wrapper input { display: none; }
  </style><a href="#" data-id="1" class="button">Read more title 1</a>
<a href="#" data-id="2" class="button">Read more title 2</a>

<div class="accordion-wrapper">
  <div>
    <input id="1" name="accordion" type="checkbox"><label for="1">Title 1</label>
    <article><p>Content 1 — Lorem ipsum dolor sit amet.</p>
    </article>
</div>
  <div>
    <input id="2" name="accordion" type="checkbox"><label for="2">Title 2</label>
    <article><p>Content 2 — Consectetur adipiscing elit.</p>
    </article>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script>
  // 点击链接：激活对应面板
  $("a.button").on("click", function(e) {
    e.preventDefault();
    const id = $(this).data('id');
    // 可选：关闭其他面板（单选模式）
    $(".accordion-wrapper input").prop('checked', false);
    $(`#` + id).prop('checked', true);
  });

  // 点击标题：自然触发 checkbox 切换（无需额外 JS）
  // （CSS :checked 已自动处理 article 显隐）
</script>

关键总结

状态驱动 UI：手风琴的开闭本质是 checkbox 的 checked 状态变化，CSS 通过 :checked ~ article 响应，JS 应只负责可靠地更新该状态。
.prop() 是金标准：对 checked、disabled、selected 等布尔状态，必须使用 .prop()，而非 .attr()。
避免内联样式干扰：删除所有手动设置 max-height 的 JS 代码，让 CSS 过渡完全接管动画。
增强健壮性：通过 data-id 解耦链接与面板，支持任意数量 accordion 项，且易于维护。

遵循以上原则，即可实现稳定、可预测、符合现代前端实践的手风琴联动控制。