单击时更改列表样式图像

Question

我有一个带有list图片的小加号列表。以下是切换列表的javascript：

$(document).ready(function(){
      $('#main li ul').hide();
      $('#main li').click(function() {
      $(this).children('ul').slideToggle("slow");
      });
});

我希望能够做的是，当我点击其中一个月时，该符号会变为位于here的减号

到目前为止，

Here是指向工作列表fiddle的链接。

任何关于使图像变化的最简单方法的想法？

Answer 1

检查出来：http://jsfiddle.net/RPpgQ/

<强> CSS

#main {
    cursor:pointer;
    padding-left: 20px;
}

#main li {list-style-image: url('http://static.nahoku.com/skin/frontend/enterprise/nahoku/images/plus-icon.gif');}
#main li.open {list-style-image: url('http://avnetexpress.avnet.com/wcsstore/emstore/images/prodnav-minus-sm.gif');}

#main ul {
     list-style-image: none;
}​

<强>的JavaScript

$(document).ready(function(){
    $('#main li ul').hide();
    $('#main li').click(function() {
        $(this).children('ul').slideToggle("slow");
        $(this).toggleClass('open');
    });
});
​

Answer 2

$(document).ready(function(){
      $('#main li ul').hide();
      $('#main li').click(function() {
        $(this).children('ul').slideToggle("slow");
        $(this).toggleClass('minus');  /*img gets applied to ul - not li */
   });
});

然后

.minus{
   list-style-image:url('http://minus_img');
 }