Javascript 手风琴图标不会切换

我一直在尝试让我的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>

---

检查两条注释//==修改和//==新代码

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


});
});

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


});
});