擴展和收縮時，jQuery手風琴行為異常

Question

我在弄清楚手風琴中的錯誤時遇到了麻煩。 單擊時箭頭圖標行為異常。 如果您在這里 ，您會看到手風琴隱藏的某些類別。 當您單擊一個然后關閉它時，它的行為正常。 但是，如果單擊一個，然后在關閉第一個之前單擊下面的另一個，則會注意到上面一個的箭頭已返回到其“關閉”位置，而沒有將其關閉。

這是組成每個手風琴的HTML：

<dl class="accordion">
<dt><strong>Accordion Title:</strong>&nbsp;&nbsp;Details</dt>
<dd>Hidden details</dd>
</dl>

箭頭的CSS：

.accordion dt:after {
  content: "\f125";
  color: #ED4F30;
  font-family: "Ionicons";
  padding-left: 10px;
}

和

.accordion dt.accordion-active:after {
  content: "\f123";
  color: #ED4F30;
  font-family: "Ionicons";
  padding-left: 10px;
}

最后是我用來擴展/折疊的jQuery：

function ($) {
  //Hide all panels
    var allPanels = $('.accordion > dd').hide();
  //Show first panel
  //$('.accordion > dd:first-of-type').show();
  //Add active class to first panel 
  //$('.accordion > dt:first-of-type').addClass('accordion-active');
  //Handle click function
    jQuery('.accordion > dt').on('click', function () {
      var $this = $(this) ,
          $target = $this.next();
           jQuery('.accordion > dt.accordion-active').not($this.toggleClass('accordion-active')).removeClass('accordion-active');
      $this.siblings('dd').not($target.addClass('active').slideToggle()).slideUp();
      return false;
    });
}

有什么想法我想念的嗎？

Answer 1

看來您有點復雜化了。 您不需要使用“ not（）”方法來過濾掉任何內容。 您只需要在2個狀態之間切換（添加/刪除類，顯示/隱藏元素），因此您只需要使用代碼中已經存在的2個jQuery方法。

jQuery('.accordion > dt').on('click', function () {
    var $this = $(this),
        $target = $this.next();
    $this.toggleClass('accordion-active');
    $target.slideToggle();
    return false;
});

這是基於您提供的代碼的JSFiddle： http : //jsfiddle.net/e5pe5/

讓我知道這是否是您手風琴的預期功能。