如何使jQuery UI Accordion头部ui-icon颜色始终一致？

问题根源 #

你遇到的问题有两个核心原因：

1. jQuery UI默认的accordion图标是背景精灵图实现的，不是通过color属性控制，所以你写的.ui-accordion-header.ui-icon { color:black; }完全无效——激活状态下框架会切换精灵图的显示位置，导致图标颜色变白。
2. CSS选择器错误：.ui-accordion-header.ui-icon表示同时拥有这两个类的元素，但实际图标是.ui-accordion-header的子元素，正确选择器应该是.ui-accordion-header .ui-icon。

解决方案 #

推荐用你已经引入的Material Symbols字体图标替换默认精灵图标，这样能完全控制图标颜色，同时实现头部激活时的背景变色效果。具体修改如下：

修改后的完整代码 #

<!DOCTYPE html>
<html>

<head>
  <base target="_top">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
  <link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet" />
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
  <style id="mainStyles">
    /* 隐藏jQuery UI默认图标 */
    .ui-accordion-header .ui-icon {
      display: none;
    }

    /* 自定义头部前置图标 */
    #create-pagination-header::before {
      content: 'expand_more';
      font-family: 'Material Symbols Outlined';
      color: black;
      margin-right: 8px;
      transition: transform 0.3s;
    }

    /* 激活状态下的头部样式 */
    .ui-accordion-header.ui-state-active { 
      background-color: hsl(256, 92%, 95%); 
      color: black;
      border: none;
    }

    /* 激活时旋转图标增强交互 */
    .ui-accordion-header.ui-state-active::before {
      transform: rotate(180deg);
    }

    .ui-accordion {
      border-color: #baa2fb;
    }   
  </style>
</head>
<body>
  <div id="create-pagination-accordion">
    <div id="create-pagination-header" class="create-form-row">
      <span>Pagination</span>
    </div>
    <div id="create-pagination-block">
      <div class="create-form-row">
          <select id="create-input-pagination" style="padding: 3px 2px;">
          <option value="none" selected>None</option>
          <option value="cursor">Cursor</option>
          <option value="next-page">Next Page</option>
          <option value="offset-limit">Offset Limit</option>
        </select>
      </div>     
     </div>
  </div>
  <script>
    $(document).ready(function () {
      $("#create-pagination-accordion").accordion({
        animate: 500,
        collapsible:true,
        heightStyle: "content",
        header:"#create-pagination-header",
        active: false
      });
    });           
  </script>
</body>
</html>

关键调整点 #

• 隐藏默认精灵图标，改用Material Symbols的expand_more图标作为头部前置元素，直接用color: black固定颜色，激活/未激活状态保持一致
• 激活状态下给头部设置目标背景色，同时旋转图标提供清晰的交互反馈
• 修正了原代码中错误的CSS选择器问题

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