Question

我有一个针对常见问题的手风琴设置，背景图像不断变化。我现在尝试向上或向下添加箭头到.ac-header，具体取决于.ac-header的活动状态。这是我目前的代码：

<ul id="faqs-list" class="fd-accordion">
    <li>
        <header class="ac-header">
            <h4>1. Question 1?</h4>
            <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" />
        </header>
        <div class="ac-content">
            <p>Answer 1</p>
        </div>
    </li>
    <li>
        <header class="ac-header">
            <h4>1. Question 2?</h4>
            <img src="assets/images/arrow-down.png" class="arrow" alt="arrow" />
        </header>
        <div class="ac-content">
            <p>Answer 2</p>
        </div>
    </li>
</ul>



$(function(){
  $(document).ready(function() {
  $(".ac-content").hide();

  $('.ac-header').on("click", function (e) {
  $('.ac-header').not(this)
               .removeClass("active")
               .next(".ac-content")
               .hide();

  $(this).toggleClass("active")
       .next(".ac-content")
       .toggle($(this).is(".active"));
  });
});

寻找有关应该添加到javascript中的内容的建议，以更改图像＆＃34; arrow-down.png＆＃34;。谢谢！

Answer 1

尝试此操作：在切换类激活后，检查标头是否具有活动类并相应地更改图像

$(document).ready(function() {
      $(".ac-content").hide();

      $('.ac-header').on("click", function (e) {
      $('.ac-header').not(this)
                   .removeClass("active")
                   .next(".ac-content")
                   .hide();

      $('.ac-header').find('img').attr('src','assets/images/arrow-down.png').attr('alt','down-arrow'); 

     $(this).toggleClass("active")
       .next(".ac-content")
       .toggle($(this).is(".active"));

     if($(this).hasClass('active'))
     {
      $(this).find('img').attr('src','assets/images/arrow-right.png').attr('alt','right-arrow'); 
     }

    });
 });

<强> DEMO

当手风琴标题改变时，用jquery改变图像

1 个答案: