Javascript 手风琴拨动箭头

我正在尝试解决如何在打开另一个手风琴面板时重置切换箭头。我已经设法在一个面板的打开和关闭之间切换它-但是让它打开和打开另一个面板让我感到困惑

查看

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>

---

您可以使用class

rotate2

搜索实际的img，然后将其删除，只需添加此行：

$（'.rotate2'）.removeClass（'rotate2'）

---

编辑

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

解决了在尝试打开/关闭每个面板且不更改元素本身上的箭头时出现的问题。您可以排除实际的

img

：

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

---

我想你需要这样的东西：

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

---

在为当前元素添加类之前，您应该删除所有

rotate2

类。

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

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

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

---

请看

JQ手风琴一次只能打开一个部分（我相信）…否则它们就不是手风琴了。请看-这几乎就是了。它只需要在打开和关闭一个手风琴面板时切换箭头。

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