我正在尝试弄清楚如何在打开另一个 Accordion 面板时重置我的切换箭头。我已经设法在一个面板的打开和关闭上切换它 - 但是让它打开并打开另一个面板让我感到难过....
查看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");
}
});
});
最佳答案
您可以搜索具有类 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
编辑
解决了当您尝试打开/关闭每个面板并且不更改元素本身上的箭头时的问题。您可以排除实际的 img
:
var im = $(this).find('img');
$('.rotate2').not(im).removeClass('rotate2');
im.toggleClass('rotate2');
AnotherDemoFiddle
关于javascript - Accordion 切换箭头,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28700908/