jQuery手風琴風格常見問題解答+和 -

Question

我正在嘗試使用常見問題手風琴+和 - 在問題前的標誌like this.它幾乎可以工作，除非再次單擊打開的部分時，minus保持爲減號。有什麼辦法可以讓它成爲一個加分？我試圖寫第一條評論線，但它似乎沒有工作。要小心，我不知道我在用jQuery做什麼，只是根據我在其他語言中看到和了解的內容進行了修改。

$('#accordion').find('.accordion-toggle').click(function(){ 

    //Check if this panel is minus and change it to plus *** THIS DOESN'T WORK *** 
    if($('img', this).attr('src') == 'minus.png'){ 
    $('img', this).attr('src', 'plus.png'); 
    } 

    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 

    //Change this panel to minu 
    $('img', this).attr('src','minus.png'); 

    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 

    //Change other panels to plus 
    $(".accordion-toggle img").not($('img', this)).attr('src', 'plus.png'); 

}); 

<!-- CSS --> 
<style> 
    .accordion-toggle {margin-top: 10px; cursor: pointer; background-color: #F0F0F0; padding: 16px 24px 19px 0px;} 
    .accordion-toggle h4 { line-height: 26px; font-weight: 600;} 
    .accordion-content {display: none; background-color: #F0F0F0; padding: 1px 425px 34px 56px; line-height: 25px; } 
    .accordion-content.default {display: block;} 
    #accordion { 
    font-family: "Open Sans"; color: #0D253E; font-size: 16px; 
    } 
    .plus { 
    margin: 3px 16px 3px 20px; float: left; 
    } 
</style> 

<!-- HTML --> 
<div id="accordion"> 
    <div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div> 
    <div class="accordion-content"> 
    <p>Content text</p> 
    </div> 
    <div class="accordion-toggle"><img class="plus" src="plus.png" height="20px"/><h4>Question?</h4></div> 
    <div class="accordion-content"> 
    <p>Content text</p> 
    </div> 
    <div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div> 
    <div class="accordion-content"> 
    <p>Content text</p> 
    </div> 
    <div class="accordion-toggle"><h4><img class="plus" src="plus.png" height="20px"/>Question?</h4></div> 
    <div class="accordion-content"> 
    <p>Content text</p> 
    </div> 
</div> 

Answer 1

您可能需要改變你叫裏面每一個你div.accordion-toggle DOM元素（一個或多個）

$('#accordion').find('.accordion-toggle').click(function() { 

    // Check if this panel is minus and change it to plus *** THIS DOESN'T WORK *** 

    // @eeya: Change it like this: (Find every img elements 
    // under the .accordion-toggle element that called 
    // the event listener 
    if ($(this).find('img').attr('src') === 'minus.png') { 
     $(this).find('img').attr('src', 'plus.png'); 
    } 

    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 

    //Change this panel to minu 
    $('img', this).attr('src','minus.png'); 

    //Hide the other panels 
    $(".accordion-content").not($(this).next()).slideUp('fast'); 

    //Change other panels to plus 
    $(".accordion-toggle img").not($('img', this)).attr('src', 'plus.png'); 

}); 

希望你img屬性的方式這有助於你的情況。