手风琴切换箭头

Question

我正在尝试弄清楚如何在打开另一个手风琴面板时重置我的切换箭头。我已经设法在打开和关闭一个面板时切换它 - 但是让它打开并打开另一个面板让我感到难过....

查看JSFiddle

HTML

<div class="accord-header">
   <img class="arrow-img rotate" src="img.jpg" />
   <h3>Title</h3>
</div>

<div class="accord-content">
   <p>Content goes here</p>
</div>

Javascript

$(document).ready(function() {
      $(".accordion .accord-header").click(function() {

        $(this).children("img").toggleClass('rotate2');


      if($(this).next("div").is(":visible")){
        $(this).next("div").slideUp("normal");


      } else {
        $(".accordion .accord-content").slideUp("normal");
        $(this).next("div").slideToggle("normal");
      }
    });
});

Answer 1

你可以用 class rotate2 搜索实际的 img 然后删除它，只需添加这一行：

$('.rotate2').removeClass('rotate2');

$(".accordion .accord-header").click(function () {
    $('.rotate2').removeClass('rotate2');
    $(this).find("img").toggleClass('rotate2');
    if ($(this).next("div").is(":visible")) {
        $(this).next("div").slideUp("normal");
    } else {
        $(".accordion .accord-content").slideUp("normal");
        $(this).next("div").slideToggle("normal");
    }
});

DemoFiddle

---

编辑

解决了当您尝试 open/close 每个面板并且不更改元素本身上的箭头时的问题。您可以排除实际的 img:

var im = $(this).find('img');
$('.rotate2').not(im).removeClass('rotate2');
im.toggleClass('rotate2');

AnotherDemoFiddle

Answer 2

我想你需要这样的东西：

    $(document).ready(function() {
      $(".accordion .accord-header").click(function() {
          $(".accordion .accord-header").children("img").removeClass('rotate2');
          $(this).children("img").toggleClass('rotate2');

          if($(this).next("div").is(":visible")){
              $(this).next("div").slideUp("normal");
          } else {
              $(".accordion .accord-content").slideUp("normal");
              $(this).next("div").slideToggle("normal");
          }
    });
});

您应该在为当前元素添加 class 之前删除所有 rotate2 class。

Answer 3

看起来你在 else 之后有一些杂散代码：

        $(".accordion .accord-content").slideUp("normal");

这会向上滑动所有内容，而不仅仅是下一个。删除它。

见Fiddle.