jQuery Accordion 问题在这里答案

【问题标题】：jQuery Accordion Issues HerejQuery Accordion 问题在这里
【发布时间】：2016-08-16 10:46:48
【问题描述】：

我正在尝试创建 jQuery 手风琴，当单击带有“fa fa-angle-double-right”类的图标（字体真棒）时，它会向下和向上滑动。然后当手风琴显示内容时，它将变为另一个图标类“fa fa-angle-double-down”（这是一个向下箭头）。

) {
            $(this)
                .next()

如果您能帮我展示一下 JSFIDDLE 解决方案，那就太好了。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用 CSS 和相同的图标来做到这一点，它看起来也很酷：

http://jsfiddle.net/3fpaa648/6/

添加 CSS：

dt i {
  transition: all .5s;
}
dt.active i {
  transform: rotate(90deg);
}

您可以使用不同的类方法，但为了简单起见，我使用了它：

(function() {
    $('dd').filter(':nth-child(n+4)').addClass('hide');
    $('dl').on('click', 'dt', function() {
  $(this).addClass('active');
  $(this).siblings('dt').removeClass('active');
        $(this)
            .next()
                .slideDown(300)
                .siblings('dd')
                    .slideUp(300);
    });
})();

但是使用您想要的方法回答您的原始问题：

http://jsfiddle.net/3fpaa648/7/

将此添加到您的 JS 中

$(this).find('i').removeClass('fa-angle-double-right').addClass('fa-angle-double-down');
$(this).siblings('dt').find('i').removeClass('fa-angle-double-down').addClass('fa-angle-double-right');

【讨论】：

我怎样才能关闭第一个元素？就像默认关闭所有元素一样。
喜欢页面第一次加载的时间？将 $('dd').filter(':nth-child(n+4)').addClass('hide'); 更改为 $('dd').addClass('hide'); 或仅在 html 中添加以开头的类，或在您的 css 中将 dd 设置为 display: none 而根本不使用类。
您的第一个解决方案有问题。尽管手风琴内容已打开，为什么第一个元素具有右箭头图标？看到这个：prnt.sc/avj89f
关于我的第二个问题或后续问题。你能给我看看你的小提琴吗？
jsfiddle.net/3fpaa648/9 将类 'active' 添加到第一个 dt，从而解决了问题。 jsfiddle.net/3fpaa648/10 展示了默认情况下关闭所有内容时的外观。

【解决方案2】：

最简单的方法可以是这样（类似于你的方法）

(function() {
    $('dd').filter(':nth-child(n+4)').addClass('hide');
    $('dl').on('click', 'dt', function() {

        $(this)
            .next()
                .slideDown(300)
                .siblings('dd')
                    .slideUp(300);

          $("dl").find("i").each(function() {
            $( this ).removeClass( "fa fa-angle-double-down" );
            $(this).addClass("fa fa-angle-double-right");
          });
          $(this).find("i").addClass("fa fa-angle-double-down");

    });
})();

fiddle 示例

【讨论】：