Изображение не придет во второй раз, я нажимаю

Question

Я применил простой список типов гармоник, там все списки открываются при загрузке. проблема в том, что когда я нажимаю на вкладку в первый раз, изображение должно меняться от открытого к закрытию значка, что хорошо. но когда я снова нажимаю ту же самую вкладку, содержимое скользит вниз, что хорошо, но изображение не меняется с cklose для открытия.

классы изображения являются:

.close_accordianimage{ background:url(../img/close.png) left 9px no-repeat;} 
.open_accordianimage{ background:url(../img/open.png) left 9px no-repeat;} 

сценарий я использовал это:

//for opening and closing content on click of h3, and also adding of close image on click 
<script> 
$(document).ready(function() { 
    $("#odd-accordion h3").click(function() { 
     $(this).next('div').toggle('300'); 
     $(this).addClass('close_accordianimage'); 
    }); 
}); 



</script> 



<script> 
$(document).ready(function(){ 
    $('#odd-accordion h3').addClass('open_accordianimage'); 
}); 

образец HTML-код:

<div id="odd-accordion"> 
    <h3 class="filtertitle">Seater :</h3> 

    <div> 
     <div class="filterfield"> 
      <input type="checkbox" />Seater</div> 
     <div class="filterfield"> 
      <input type="checkbox" />Sleeper</div> 
    </div> 
    <h3 class="filtertitle">A/C :</h3> 

    <div> 
     <div class="filterfield"> 
      <input type="checkbox" />A/C</div> 
     <div class="filterfield"> 
      <input type="checkbox" />Non-A/C</div> 
    </div> 
    <h3 class="filtertitle">Bus Brand :</h3> 

    <div> 
     <div class="filterfield"> 
      <input type="checkbox" />Volvo/Mercedes</div> 
     <div class="filterfield"> 
      <input type="checkbox" />Non-Volvo/Mercedes</div> 
    </div> 
    <h3 class="filtertitle">Timing :</h3> 

    <div> 
     <div class="filterfield"> 
      <input type="checkbox" />Early Morning 
      <br /> <span class="timing">(5:00 AM - 9:00 AM)</span> 

     </div> 
     <div class="filterfield"> 
      <input type="checkbox" />Morning/Afternoon 
      <br /> <span class="timing">(9:00 AM - 5:00 PM)</span> 

     </div> 
     <div class="filterfield"> 
      <input type="checkbox" />Evening 
      <br /> <span class="timing">(5:00 PM - 9:00 PM)</span> 

     </div> 
     <div class="filterfield"> 
      <input type="checkbox" />Night 
      <br /> <span class="timing">(9:00 PM - 5:00 AM) </span> 

     </div> 
    </div> 
    <h3 class="filtertitle">Fare :</h3> 

    <div>Jquery filer</div> 
</div> 

я просто хочу, открытые и Cose классы (с соответствующими изображениями), чтобы также переключать с помощью content.please help

Answer 1

Вам нужно что-то вроде этого:

$("#odd-accordion h3").click(function() { 
    $(this).next('div').toggle('300'); 
    if ($(this).hasClass('close_accordianimage')) { 
     $(this).addClass('open_accordianimage'); 
     $(this).removeClass('close_accordianimage'); 
    } else { 
     $(this).removeClass('open_accordianimage'); 
     $(this).addClass('close_accordianimage'); 
    } 
}); 

Попробуйте fiddle и добавьте правильный URL для изображений.

Answer 2

Думаю, вы забыли добавить removeClass(). Теперь вы просто держите классы стекирования. Вы использовали Firebug или что-то в этом роде для проверки элементов после нескольких щелчков мышью, я уверен, у него есть список дубликатов close_accordianimage.

Чтобы объяснить, что происходит, вы начинаете с open_accordianimage, затем добавляется close_accordianimageduplicates, и он никогда не удаляется. Для этого нужно удалить open_accordianimage и добавить close_accordianimageduplicates, и наоборот.