通过jQuery切换列表样式图像

如何通过jQuery切换列表样式图像？

我首先尝试更改列表样式图像，但这不起作用。 有谁知道我在这里做错了什么？

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

我也试过以下，但没有想要的结果

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

和

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

Answer 1

list-style-image是在ul上设置的，所以如果你试图让hover中的子弹图像发生变化，它将无法工作……每个hover都会触发所有的子弹切换。

如果您想在每个li上更改hover上的项目符号，则需要将其添加为background-image 。 所以这样的事情

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

示例： http ： //jsfiddle.net/jasongennaro/SZzRm/

Answer 2

你应该在ul而不是li元素上list-style-type 。

尝试在css属性上使用camelCase。 来自.css()上的文档 ：

不支持速记CSS属性（例如margin ， background ， border ）。 例如，如果要检索渲染边距，请使用： $(elem).css('marginTop')和$(elem).css('marginRight') ，依此类推。

所以使用：

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