Question

当一个面板打开时，我想让我的手风琴中的小插头朝下，但我的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'); 
});

有任何帮助吗？的 Code right here

Answer 1

好的 - 所以你在做什么有几个问题。选择器.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'); 
  }
}

DEMO：http://www.bootply.com/0fHUqXpNn6#

注意：我注意到你实际上可以点击标题，这将导致点击回调，但不会扩展手风琴，你应该在不同的控件上设置此事件，以避免在实际手风琴点击时更改图标没有被解雇。

当手风琴小组打开不工作时，Caret指向下方

1 个答案: