单击箭头图标时更改背景颜色/图像的问题。
期待实现两个目标。
因为稍后被移除而不关心加号图标(左侧)。
当单击箭头图标进行扩展时,可以通过样式管理将颜色更改为绿色,但默认情况下显示绿色,不应该显示绿色,它应该看起来像未单击的其他项目。
我也试图操纵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);
要在开始时删除默认的绿色突出显示,您应该从第一个面板的.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 case检查用户是打开还是关闭选项卡,并仅在必要时添加highlight
类。