Question

如何通过jQuery切换list-style-image？

我首先尝试更改list-style-image，但这不起作用。有谁知道我在这里做错了什么？

[..]
$(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上，因此，如果您尝试在悬停上更改项目符号图像，则无效...每次悬停都会触发所有项目符号切换。< / p>

如果您想在每个li上更改悬停上的项目符号，则需要将其添加为background-image。像这样的东西

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

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

Answer 2

您应该list-style-type上的ul，而不是li元素。

尝试在css属性上使用camelCase。来自the docs on .css()：

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

所以使用：

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

通过jQuery切换列表样式图像

2 个答案: