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/