如何用jquery控制展开小图标

HTML代码：
<a href="javascript:void1()" class="folder"></a>JQuery代码：
$(function () {     
   $("a.folder").click(function () {
       $(this).toggleClass("unfolder");
    });
 })CSS代码：
   a.folder
      {
        background-position: -7px -7px;           
        display:inline-block;
        background-image: url('Images/Small_pic/modifier_add.gif');  <!--显示一个加号小图标-->
        background-repeat:no-repeat; 
        width:13px;
        height:13px; 
        border:1px solid #99CCFF;   
        margin-right:5px; 
        vertical-align:text-bottom;                                                  
      } 
      .unfolder
      {
         background-image:url('Images/Small_pic/modifier_subtract.gif');    <!--显示一个减号小图标-->
      }  
问题：展开的时候没有图标没有变化。个人觉得是unfolder,folder样式里的background-image属性重复的缘故?这个问题该如何解决?

解决方案 »

  1.   

    toggleClass只是对选中的样式进行切换并不能。。在两个样式之间切换。。
      

  2.   

     $(function () {
                $("a.folder").click(function () {                if ($(this).attr('class') != 'unfolder') {
                    
                        
                        $(this).attr('class', "unfolder");
                    }
                    else { $(this).attr('class', "folder"); }            });
            })
    这是我想的方法你可以试试。。
      

  3.   

    $(function () {   
      $("a.folder").click(function () {
        $(this).toggleClass("unfolder");
        $(this).toggleClass("folder");
      });
    });