2014-09-30 104 views
0

我有一個手風琴設置常見問題,具有不斷變化的背景圖像。我現在試圖向.ac-header添加一個向上或向下的箭頭,具體取決於.ac-header的活動狀態。這是我現在的代碼:更改圖像與jquery時,一個手風琴頭更改

<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中添加什麼以更改圖像「arrow-down.png」。謝謝!

+0

規範是使用CSS,而不是插入'它做的事img'標記。類變化足以切換背景 – charlietfl 2014-09-30 12:33:45

+0

'$(function(){'刪除此 – 2014-09-30 12:36:33

+0

檢查[jsfiddle](http://jsfiddle.net/prashantptapase/no68kyje/)。完美工作。使用'.attr )' – 2014-09-30 12:38:05

回答

0

試試這個:切換類活躍後,檢查是否標頭具有主動類或不和改變圖像相應

$(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

+0

這改變了箭頭,但是直到答案被再次隱藏。 – ljames 2014-09-30 12:48:36

+0

你想要這個http://jsfiddle.net/59jrxpab/16/ – 2014-09-30 12:50:44

+0

或像這樣http://jsfiddle.net/59jrxpab/18/ – 2014-09-30 12:53:17