jquery - 如何通过 jQuery 单击更改 html 元素 <li> 的颜色？

Question

如何在点击时更改 UL 'li' 的背景颜色？

编辑 我可以更改 li“a”，但是整个 li

又如何呢？

这有效:

 $(".clickableUL").click(function() {
           $(this).find("li a").addClass("active");

       });

但是 find("li") 什么也不做。我希望 LI 突出显示而不仅仅是链接的文本。

Answer 1

// javascript
$("li>a").click(function(){
   $(this).parent().toggleClass("clicked");
});

/* CSS */
li { background: blue; }
li.clicked { background: red; }

您还可以使用display: block;关于<a>使其填充 <li>除非您希望它保持更改。

编辑:哦!刚刚意识到您还可以将点击事件直接应用于 <li>本身例如。

$("li").click(function(){
   $(this).toggleClass("clicked");
});