Jquery Accordion with Font Awesome Toggle

Question

我一直在寻找董事会，并没有找到解决方案来帮助解决我的问题。 我有一个手风琴功能，功能很棒。 我希望能够在单击手风琴按钮时在字体真棒类fa-angle-up / fa-angle-down之间切换。 这很简单，但是我遇到的问题是手风琴中的第一个div应该在页面加载时打开，而其他的则关闭。 下面的代码允许div正确切换，当一个打开另一个关闭，但字体真棒切换没有正确触发。 现在，当我点击按钮时，第一个div关闭/字体真棒切换正确，但div的按钮打开，手风琴中的其余按钮，字体真棒图标全部切换类。

我是jquery的新手，所以所有的帮助都表示赞赏。 就像我说的那样，我已经通过电路板查看是否有任何其他与手风琴/字体真棒切换有关的帖子可以帮助我，但我尝试的一切都没有用，但是我可能会错误地实现它，因为我不是最好用jquery。

在这里演示我目前所拥有的： http ： //jsbin.com/zaqocu/1/

Answer 1

查看toggleClass（） 。

例如，

jQuery的

$('mything').click(function(){
    $(this).toggleClass('myclassOne myclassTwo');
});

因此，当您单击时，它将删除您当前的类，然后添加新的类。 再次点击它会触发。

Answer 2

使用你的jsbin示例。 我刚刚清理了课程。 我不喜欢使用切换，但我确信他们会以这种方式工作。 基本上，每当您点击标题时，默认所有箭头都会向下，然后如果您显示标题，请将该类切换为标题。

这是垃圾箱： http ： //jsbin.com/xuzorokaho/1/

我相信如果我曾经为此进行过切换，它会根据最后的状态向上或向下切换所有箭头，这可能会下降并且应该保持不变。

$(document).ready(function(){
    $(".accordion-toggle").click(function() {
        $(".accordion-toggle i").removeClass('fa-angle-up');
        $(".accordion-toggle i").addClass('fa-angle-down');
        if($(this).next("div").is(":visible")){
            $(this).next("div").slideUp("slow");
        } else {
            $(this).find('i').removeClass('fa-angle-down')
            $(this).find('i').addClass('fa-angle-up');
            $(".accordion-content").slideUp("slow");
            $(this).next("div").slideToggle("slow");
        }
    });
});

Answer 3

这是一个有效的代码：

$(document).ready(function(){
$(".accordion-toggle").click(function() {


      if($(this).next("div").is(":visible")){
        $(this).next("div").slideUp("slow");
        $(this).children().toggleClass("fa-angle-up fa-angle-down");
      } else {
        $(".accordion-toggle").next("div").slideUp("slow");
        $(".accordion-toggle i").attr("class", "fa fa-angle-down");
        $(this).next("div").slideDown("slow");
        $(this).children().toggleClass("fa-angle-up fa-angle-down");
      }
});
});

在打开单击的选项卡之前，您需要关闭所有选项卡。

祝你有个好的一天。

http://jsbin.com/cizoziqiji/2/