切换jQuery-UI小部件

Question

我有：

<div class="ui-widget">
   <div class="ui-widget-header">
      <span class="ui-icon ui-icon-circle-triangle-n">My Menu</span>
   </div>
   <ul class="ui-widget-content">
      <li>Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
   </ul>
</div>

我的jQuery是：

$('.ui-widget-header').click(function() {
   $('.ui-widget-header+ul').toggle('slow');        
});

问：当用户点击.ui-widget-header时，如何在ui-icon-circle-triangle-n和ui-icon-circle-triangle-s之间切换类？

Answer 1

最简单的方法是使用.toggleClass()

$('.ui-widget-header').click(function() {
   $('.ui-widget-header+ul').toggle('slow');
   $('.ui-icon', this).toggleClass('ui-icon-circle-triangle-n ui-icon-circle-triangle-s');        
});