如何修复jQuery UI Accordion：展开时标题保持蓝色，收起恢复默认

没问题，这个需求很好实现！核心是利用jQuery UI Accordion自带的状态类，同时修正你那个全部展开/收起按钮的实现逻辑，确保组件状态和样式能同步起来。

核心思路 #

jQuery UI Accordion会自动给展开状态的标题添加ui-accordion-header-active类，收起时则移除这个类。我们只需要针对这个类设置蓝色文本，再配合hover样式，就能完美实现你要的效果。另外，你原来的toggle按钮直接操作内容面板的显示隐藏，会导致组件的状态类不同步，所以得改用官方API来操作。

修改后的完整代码 #

JavaScript 部分

$(document).ready(function(){
  let collapsed = true;
  $("#toggle").button().click(function(){
    // 改用Accordion官方API切换全部展开/收起，确保状态类同步
    const accordion = $("#accordion");
    if(collapsed) {
      // 展开所有面板：传入所有面板的索引（示例是1个面板，索引为0，多个的话按顺序写[0,1,2...]）
      accordion.accordion("option", "active", [0]);
    } else {
      // 收起所有面板：设置active为false
      accordion.accordion("option", "active", false);
    }
    collapsed = !collapsed;
  });
});

$(function() {
  const icons = {
    header: "ui-icon-plus",
    activeHeader: "ui-icon-minus"
  };
  $( "#accordion" ).accordion({
    icons: icons,
    collapsible: true,
    active: false,
    heightStyle: "content"
  });
});

CSS 部分

/* 鼠标悬停时标题变蓝，限定为Accordion的标题避免影响其他h3 */
h3.ui-accordion-header:hover {
  color: #1995E3;
}

/* 展开状态的标题保持蓝色，同时覆盖hover状态防止颜色变化 */
h3.ui-accordion-header-active,
h3.ui-accordion-header-active:hover {
  color: #1995E3;
}

HTML 部分

<meta charset="utf-8">
<title>jQuery UI Accordion - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<br>
<button id="toggle">Toggle All</button>
<div id="accordion">
  <h3>1 &nbsp; &nbsp; &nbsp; What payments do you accept?</h3>
  <div>
    <p>PayPal and Debit/Credit Cards.</p>
  </div>
  <!-- 有更多面板的话继续在这里添加 -->
</div>

关键修改说明 #

1. CSS 调整：

   • 给hover选择器加上ui-accordion-header类，避免影响页面其他无关的h3标签
   • 添加ui-accordion-header-active类的样式，确保展开时标题固定为蓝色，同时覆盖hover状态，防止展开时鼠标移动导致颜色波动

2. JavaScript 调整：

   • 原来的toggle按钮直接调用show()/hide()操作内容面板，会导致Accordion组件的状态类（比如ui-accordion-header-active）无法自动更新，改用accordion("option", "active", ...)官方API后，组件会自动维护标题的状态类，样式就能正确同步

这样修改后，就能实现你要的效果：

• 鼠标悬停标题时文本变蓝
• 面板展开时标题保持蓝色（即使鼠标离开）
• 面板收起时标题恢复默认样式
• 全部展开/收起按钮也能正确同步标题的颜色状态

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