jquery - 单击时更改列表样式图像

Question

我有一个带有list小加号图像的列表。这是javascript切换列表的方法：

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

我想做的是，当我单击其中一个月份时，符号变为位于此处的减号

fiddle到目前为止，这是一个工作列表的链接。

关于什么是改变图像的最简单方法的任何想法？​</p>

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');
 }