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

Question

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

编辑我可以改变li"a",但整个李怎么样

这工作:

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

       });

但发现("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>,除非你想让它保持改变.

编辑:噢哦!刚刚意识到你也可以直接将click事件应用于<li>自身,例如.

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