Question

所以我设法解决了如何将+图标更改为 - 当切换但是你切换另一个手风琴而另一个关闭它时图标保持不变 - 我想返回+图标。

试图在jsfiddle中重新创建我的手风琴，但不知何故它不能正常工作。 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

元素没有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
        }
});

fiddle

Answer 2

选中Fiddle。

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

手风琴切换图标

2 个答案: