javascript - Accordion 切换图标

Question

所以我设法弄清楚如何将 + 图标更改为 - 当切换时，你切换另一个 Accordion ，另一个关闭它，图标保持不变 - 我想返回到 + 图标。

试图在 jsfiddle 中重新创建我的 Accordion ，但不知何故效果不佳。 http://jsfiddle.net/13cgkvwg/

或者只看 html 模型 HERE

$(".accordion").on("click", "dd", function () {
    $("dd.active").find(".content").slideUp("slow");
        if(!$(this).hasClass("active")) {
          $(this).find(".content").slideToggle("slow");
          $(this).find('i').addClass('fa fa-minus-circle');
        } else{
            $(this).find('i').removeClass('fa-minus-circle').addClass('fa fa-plus-circle');
        }
    // }
});

<section class="faq_accordion">
    <div class="row">
        <div class="large-12 columns">
            <dl class="accordion" data-accordion="myAccordionGroup">
              <dd class="accordion-navigation">
                <a href="#panel2">Hosting <i class="fa fa-plus-circle"></i></a>
                <div id="panel2" class="content">
                  <p>Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
              </dd>
              <dd class="accordion-navigation">
                <a href="#panel3">Accordion 3 <i class="fa fa-plus-circle"></i></a>
                <div id="panel3" class="content">
                  <p>Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
              </dd>
            </dl>
        </div>
    </div>
</section>

Answer 1

Element 没有 active 类，所以永远不会去 else。所以你必须添加 active 类，如:

$(".accordion").on("click", "dd", function () {
    $(this).find(".content").slideUp("slow");//use this here instead of dd.active
        if(!$(this).hasClass("active")) {
          $(this).find(".content").slideToggle("slow");
          $(this).find('i').addClass('fa fa-minus-circle');
          $(this).addClass("active");//here add active class
        } else{
            $(this).find('i').removeClass('fa fa-minus-circle').addClass('fa fa-plus-circle');
            $(this).removeClass("active");//and here remove active class
        }
});

fiddle