Jquery Accordion with Font Awesome Toggle

Question

我一直在浏览这些板，但没有找到解决我手头问题的解决方案。我有一个手风琴功能，它的字体很棒。我希望能够在单击手风琴按钮时在字体真棒类 fa-angle-up/fa-angle-down 之间切换。这很简单，但我遇到的问题是，手风琴中的第一个 div 应该在页面加载时打开，而其他 div 是关闭的。下面的代码允许 div 正确切换，当一个打开另一个关闭时，但字体真棒切换没有正确触发。现在，当我单击一个按钮时，第一个 div 关闭/font awesome 正确切换，但要打开 div 的按钮，以及手风琴中的其余按钮，font awesome 图标都切换类。

我是 jquery 的新手，因此感谢所有帮助。就像我说的那样，我已经查看了所有其他与手风琴/字体真棒切换相关的帖子是否可以帮助我，但是我尝试的所有方法都不起作用，但是我可能执行错了，因为我没有最好的 jquery。

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

Answer 1

这是一个工作代码：

$(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/

Answer 2

查看toggleClass()。

例如，

jquery

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

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

Answer 3

使用您的 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");
        }
    });
});