Javascript 手风琴-切换时更改背景色/图像：

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

希望实现两个目标

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

默认-全部折叠，不显示绿色

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

在单击要扩展的箭头图标时，设法通过样式将颜色更改为绿色，但默认情况下显示绿色（不应该是绿色），它应该与未单击的其他项目类似

我还试图操纵js代码，但没有成功

在这里，它可以进行目视检查和进一步的故障排除：

---

要在开始时消除默认的绿色突出显示，您应该从第一个面板的

.panel heading

中删除突出显示类

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

$(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);

为了进一步解释，您的切换功能将在两种事件类型上执行：

显示

和

隐藏

。然后，您可以使用if case检查用户是否正在打开或关闭选项卡，并仅在必要时添加

高亮显示

类

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);