Toggle list-style-image via jQuery

How can i toggle the list-style-image via jQuery?

I first tried to change the list-style-image, but that won't work. Does anybody know开发者_JAVA技巧 what i'm doing wrong here?

[..]
$(this).closest('li').css("list-style-image","url('../Images/arrowDown.png')");

I also tried the following, but without the desired result

$(this).closest('li').css("list-style-image","url(arrowDown.png)");

and

$(this).closest('li').css({"list-style-image":"url(arrowDown.png)"});

---

list-style-image is set on the ul, so if you are trying to have the bullet image change on the hover, it will not work... each hover will trigger all the bullets switching.

If you want to change the bullets on the hover on each li then you need to add it as a background-image. So something like this

$('li').hover(
    function(){
     $(this).removeClass('up').addClass('down');
    },
    function(){
     $(this).removeClass('down').addClass('up');
    }    
);

Example: http://jsfiddle.net/jasongennaro/SZzRm/

---

You should list-style-type on the ul, not li element.

Try using camelCase on the css property. From the docs on .css():

Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.

So use:

$('ul').css('listStyleType', 'square');