手風琴圖標不會切換

Question

我一直在嘗試使我的jquery手風琴圖標切換。 目前，我手風琴工作正常，但是向下箭頭，向上箭頭的圖像沒有改變。 我對jquery還是很陌生，一直很難弄清楚如何去做。

$(function(){

     // Hide all but first ul li
  $('ul#accordion > li ul').click(function(e){
    e.stopPropagation();


  })
  .filter(':not(:first)')
  .hide();

$('ul#accordion > li').click(function(){
  // Set up a variable to detect if the ul is visible
  var selfClick = $(this).find('ul:first').is(':visible');
 $(this).next().removeClass('arrow-down');
  $(this).next().addClass('arrow-up');

  // If it is open, do nothing
  if (selfClick){
    return;
  }

  // Toggle the visible panel
  $(this)
  .parent()
  .find('> li ul:visible')
  .slideToggle()


  // Toggle the hidden, clicked on panel
  $(this)
  .find('ul:first')
  .stop(true, true)
  .slideToggle()


});
});


<ul id="accordion">

  <li>

 <h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3>
    <ul>
      <li>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
      </li>

    </ul>
  </li>
  <li>
 <h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3>
    <ul>
      <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
      </li>

    </ul>
  </li>
  <li>
 <h3> Lorem ipsum dolor sit amet, consectetuer adipiscing elit <i class="arrow-down"></i> </h3>
    <ul>
      <li>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud 
exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      </li>

    </ul>
  </li>
</ul>

CSS

#accordion {
  width:735px;
  padding-left:0px;
}

h3{
    background:url(../img/accordion_bg.jpg) repeat-x;
    height:38px;
    padding:0px 0px 0px 10px;
    line-height:38px;
    margin:0px;
}

#accordion li {
  cursor:pointer;
  font-weight:bold;
  color:#015287;
  margin-bottom:2px;
  list-style:none;
  border-radius:4px;
}

.accordion_head{
    background:url(../img/arrow_down.png) right center no-repeat;
}

#accordion li.active {
    background-color:#F00;
}

 .arrow-down {
  float:right;
  background:url(../img/arrow_down.png) no-repeat right center;
  margin-right:15px;
  margin-top:10px;
  width:18px;
  height:18px;
 } 

 .arrow-up {
  float:right;
  background:url(../img/arrow_up.png) no-repeat right center;
  margin-right:15px;
  margin-top:10px;
  width:18px;
  height:18px;
 } 

#accordion li ul {
  padding:0;
  margin:10px 0 0 0;
}

#accordion li ul li{
     -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}

#accordion li li {
  font-weight:normal;
  border:0;
}

Answer 1

檢查兩個注釋// ===修改和// ===新代碼

$(function(){

     // Hide all but first ul li
  $('ul#accordion > li ul').click(function(e){
    e.stopPropagation();


  })
  .filter(':not(:first)')
  .hide();

$('ul#accordion > li').click(function(){
  // Set up a variable to detect if the ul is visible
  var selfClick = $(this).find('ul:first').is(':visible');
 //=== modifications 
 //$(this).next().removeClass('arrow-down');
  //$(this).next().addClass('arrow-up');




  // If it is open, do nothing
  if (selfClick){
    return;
  }

//=== new code 
 $('#accordion').find('i').removeClass('arrow-down').addClass('arrow-up'); 
    $(this).find('i').removeClass('arrow-up');
    $(this).find('i').addClass('arrow-down');  



  // Toggle the visible panel
  $(this)
  .parent()
  .find('> li ul:visible')
  .slideToggle()


  // Toggle the hidden, clicked on panel
  $(this)
  .find('ul:first')
  .stop(true, true)
  .slideToggle()


});
});

小提琴