Question

我在弄清手风琴中的错误时遇到了麻烦。点击时箭头图标行为不正常。如果你去here，你会看到手风琴隐藏的一些类别。当您单击一个然后关闭它时，它的行为正常。但是如果你单击一个，然后在关闭第一个之前点击下面的另一个，你会注意到上面的那个箭头已经返回到它的“关闭”位置而没有关闭它。

以下是构成每支手风琴的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个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/

请告诉我这是否是您手风琴的预期功能。

jQuery Accordion在扩展和收缩时行为不端

1 个答案: