手风琴切换图标

Question

因此，我设法找出了如何将+图标更改为-切换时，但是又切换了另一只手风琴，又将其关闭时，图标保持不变的方式-我想返回到+图标。

试图在jsfiddle中重新创建我的手风琴，但是不成功。 http://jsfiddle.net/13cgkvwg/

或者只是在这里看html样机

$(".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

元素没有active类，所以永远不会去其他。 因此，您必须添加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
        }
});

小提琴

Answer 2

检查这个小提琴 。

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