Аккордеон - Изменение цвета фона / изображения при переключении: - PullRequest
Новая
       7

Аккордеон - Изменение цвета фона / изображения при переключении:

0 голосов
/ 13 апреля 2019

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

Глядя на достижение двух целей.

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

1 Ответ

1 голос
/ 13 апреля 2019

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

...