如何用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属性重复的缘故?这个问题该如何解决?




------解决方案--------------------
toggleClass只是对选中的样式进行切换并不能。。在两个样式之间切换。。
------解决方案--------------------
$(function () {
$("a.folder").click(function () {

if ($(this).attr('class') != 'unfolder') {


$(this).attr('class', "unfolder");
}
else { $(this).attr('class', "folder"); }

});
})
这是我想的方法。。。你可以试试。。
------解决方案--------------------
$(function () {
$("a.folder").click(function () {
$(this).toggleClass("unfolder");
$(this).toggleClass("folder");
});
});