Jquery 手风琴字体真棒切换

Question

我一直在查看公告板，但没有找到解决我手头问题的方法。我有一个手风琴功能，它的字体很棒。单击手风琴按钮时，我希望能够在字体 awesome classes fa-angle-up/fa-angle-down 之间切换。这很简单，但我运行遇到的问题是手风琴中的第一个 div 应该在页面加载时打开，而其他的则关闭。下面的代码允许 divs 正确切换，当一个打开另一个关闭时，但字体真棒切换没有正确触发。现在当我点击一个按钮时，第一个 div closes/font awesome 正确切换，但是 div 的按钮打开，手风琴中的其余按钮，字体 awesome 图标全部切换 class.

我是 jquery 的新手，所以非常感谢您的帮助。就像我说的，我已经查看了所有板，看看是否有任何其他 post 与 accordions/font 相关的很棒的切换可以帮助我，但我尝试的一切都没有用，但我可能已经实现了它错了，因为我不是最擅长 jquery.

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

Answer 1

查看 toggleClass()。

例如，

jquery

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

因此，当您单击时，它会删除您当前拥有的 class，然后添加新的。再次点击会翻转

Answer 2

使用您的 jsbin 示例。我刚刚清除了 classes。我不喜欢使用切换，但我确定它们会以这种方式工作。基本上，任何时候你点击一个标题，默认所有的箭头都是向下的，然后如果你显示一个标题，将 class 切换到向上。

这是垃圾桶：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/

Jquery 手风琴字体真棒切换

Jquery Accordion with Font Awesome Toggle

javascript

jquery

font-awesome

jquery-ui-accordion