Question

我的手风琴切换效果很好 - 但是我注意到当选择了“活动链接”以外的链接时箭头没有切换。有没有人对如何做到这一点有任何建议？

$(document).ready(function(){

  $('.q').on(action, function(){
    $(this).next().slideToggle(speed)
    .siblings('.a').slideUp();
    var i = $(this).children('.q i');
    i.toggleClass("fa-chevron-up fa-chevron-down");

  });

});



.faq {
    margin-bottom:1em;
}
.faq h4.q,
.faq div {
    margin:0;
    padding: 1.25em;
    position:relative;
    }
.faq h4.q {
    border-bottom: 1px #cdd4d9 solid;
    color: #eb9532;
    cursor: pointer;
    padding-right:3.1em;
}
.faq div.a {
    border-bottom: 1px #cdd4d9 solid;
    display: none;
    padding-bottom:0;
}
.faq h4.q i {
    color: #bdc4c9;
    position:absolute;
    right:1.25em;
    top:1.25em;
}


<div class="faq"> 

<h4 class="q">Question 1<i class="fa fa-chevron-down"></i></h4>
<div class="a">
<p>Answer 1</p>
</div>
<h4 class="q">Question 2<i class="fa fa-chevron-down"></i></h4>
<div class="a">
<p>Answer 2</p>
</div>
<h4 class="q">Question 3<i class="fa fa-chevron-down"></i></h4>
<div class="a">
<p>Answer 3</p>
</div>
</div>

Answer 1

您应该从此.q

中删除.children('.q i')

var i = $(this).children('i');

因为$(this)本身就是.q元素。

jQuery手风琴箭头切换

1 个答案: