Question

单击箭头图标时是否更改背景颜色/图像。

希望实现两个目标。

当用户单击箭头图标“ extended”时，背景需要更改为颜色或图像。当用户单击同一箭头图标以“折叠”时，它需要恢复为默认设置。
默认-全部折叠且未显示绿色。

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

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

我也试图操纵js代码无济于事。

在这里进行可视化和进一步的故障排除：

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

Answer 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类。

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

1 个答案: