Question

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

) {
            $(this)
                .next()

如果你能帮我看一下那个很棒的JSFIDDLE解决方案。

Answer 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');

Answer 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示例

jQuery手风琴问题在这里

2 个答案: