Accordion - 切换时更改背景颜色/图像：答案

【问题标题】：Accordion - Change background color/image when toggling:Accordion - 切换时更改背景颜色/图像：
【发布时间】：2019-04-13 16:57:18
【问题描述】：

单击箭头图标时更改背景颜色/图像的问题。

希望实现两个目标。

当用户单击箭头图标“扩展”时，背景需要更改为颜色或图像。当用户单击相同的箭头图标“折叠”时，它需要返回默认值。
默认 - 全部折叠且不显示绿色。

不关心加号图标（左侧），因为稍后会被删除。

在单击箭头图标进行扩展时，通过样式将颜色更改为绿色，但默认情况下显示绿色，它不应该是，它应该看起来像其他未单击的项目。

我也试过操作js代码，没用。

这里用于视觉和进一步的故障排除：

https://codepen.io/zmerlin/pen/gyxdPx

function toggleChevron(e) {
      $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-minus glyphicon-plus');
        //$('#accordion .panel-heading').css('background-color', 'green');
                $('#accordion .panel-heading').removeClass('highlight');
                $(e.target).prev('.panel-heading').addClass('highlight');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

【问题讨论】：

标签： javascript html css accordion

【解决方案1】：

要在开始时摆脱默认的绿色突出显示，您应该从第一个面板的 .panel-heading 中删除突出显示类。

然后，如果您仔细查看当前代码，您会发现无论您采取何种操作，最终都会添加高亮类：

$(e.target).prev('.panel-heading').addClass('highlight');

由于您希望在打开面板时显示突出显示，并在面板关闭后将其隐藏，因此您应该将代码更改为以下内容：

function toggleChevron(e) {
    $(e.target)
      .prev('.panel-heading')
      .find('i.indicator')
      .toggleClass('glyphicon-minus glyphicon-plus');
    $('#accordion .panel-heading').removeClass('highlight');
    if (e.type === 'shown') {
      $(e.target).prev('.panel-heading').addClass('highlight');
    }
}

$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

为了进一步解释 - 您的切换功能在两种事件类型上执行：shown 和 hidden。然后，您可以使用 if 大小写来检查用户是打开还是关闭选项卡，并仅在必要时添加 highlight 类。

【讨论】：