Блог

Я хочу, чтобы маленькая каретка указывала вниз в моем аккордеоне при открытии панели, но у меня возникли проблемы с моим jquery. Не совсем понимаю, что я делаю.

 $('#accordion .panel-heading').click(function () {
    $('.panel-heading').removeClass('active');
    $(this).addClass('active'); 
    $('.panel-heading .active').find('b').addClass('opened').removeClass('closed'); 
    $('.panel-heading').not('active').find('b').addClass('closed').removeClass('opened'); 
});
  

Любая помощь? Код прямо здесь.

Хорошо — итак, было несколько проблем с тем, что вы делали. Selector .not(‘active’) не искал активный класс. Но основная проблема заключалась в том, что вы не обрабатывали, нажал ли пользователь на тот же уже активный аккордеон.

Следующее будет проверять, активна ли текущая панель. Если это не так, логика проста, сделайте ее активной, очистите все открытые и установите для этого значение открыто.

Если была нажата активная панель, проверьте, была ли она открыта, если да, удалите открытую, если не установите открытую.

 $('#accordion .panel-heading').click(function () {
    if (!$(this).hasClass('active'))
    {
      // the element clicked was not active, but now is - 
      $('.panel-heading').removeClass('active');
      $(this).addClass('active'); 
      setIconOpened(this);
    }
    else
    {    
      // active panel was reclicked
      if ($(this).find('b').hasClass('opened'))
      {
        setIconOpened(null);
      }
      else
      {
        setIconOpened(this);
      }
    }
});

// create a function to set the open icon for the given panel
// clearing out all the rest (activePanel CAN be null if nothing is open)
function setIconOpened(activePanel) {
  $('.panel-heading').find('b').addClass('closed').removeClass('opened'); 

  if (activePanel)
  {
    $(activePanel).find('b').addClass('opened').removeClass('closed'); 
  }
}
  

ДЕМОНСТРАЦИЯ: http://www.bootply.com/0fHUqXpNn6 #

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