Блог

Проблема с изменением цвета фона / изображения при нажатии на значок стрелки.

Стремлюсь достичь двух целей.

1. Когда пользователь нажимает на значок стрелки «для расширения», фон должен измениться на цвет или изображение. Когда пользователь нажимает на тот же значок стрелки, чтобы «свернуть», он должен вернуться к значку по умолчанию.

2. По умолчанию — все свернуто и зеленый цвет не отображается.

Не беспокоит значок плюса (левая сторона) из-за того, что он будет удален позже.

Удалось изменить цвет на зеленый с помощью стилей при нажатии на значок стрелки для расширения, но по умолчанию отображается зеленый, чего не должно быть, он должен выглядеть так же, как и другие элементы, которые не нажаты.

Я также пытался манипулировать кодом 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);
  

Чтобы избавиться от зеленой подсветки по умолчанию при запуске, вы должны удалить класс highlight с вашей первой панели .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);
  

Чтобы объяснить это подробнее — ваша функция переключения выполняется для обоих типов событий: shown и hidden . Затем вы можете использовать регистр if, чтобы проверить, открывает или закрывает ли пользователь вкладку, и добавлять highlight класс только при необходимости.