jQuery移动版-可折叠标题中的额外图标

<div data-role="collapsible">
  <h3>
    标题
    <span class="ui-icon ui-icon-plus ui-icon-shadow"></span>
  </h3>
  <p>这里是可折叠的内容...</p>
</div>

<div data-role="collapsible" class="custom-collapsible">
  <h3>
    标题
    <span class="custom-icon"></span>
  </h3>
  <p>内容区域</p>
</div>

<style>
  .custom-collapsible h3 {
    position: relative;
    padding-right: 30px; /* 为图标留空间 */
  }
  .custom-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-image: url('your-icon.png');
    background-size: contain;
  }
  .ui-collapsible-heading-toggle.ui-btn-active .custom-icon {
    background-image: url('your-active-icon.png'); /* 展开状态图标 */
  }
</style>

$("[data-role='collapsible']").on("collapsibleexpand collapsiblecollapse", function(event) {
  const icon = $(this).find(".custom-icon");
  if (event.type === "collapsibleexpand") {
    icon.removeClass("icon-collapsed").addClass("icon-expanded");
  } else {
    icon.removeClass("icon-expanded").addClass("icon-collapsed");
  }
});