jquery - 获取在 jQuery 中单击的确切元素

Question

我有一个 UL 列表，我想更改单击的每个元素的类..很简单，但是当我使用子类别时？ ul 在 li 元素中列出并使用如下代码:

<ul class="options">
    <li>option 1</li>
    <li>option 2
        <ul>
            <li>option 2.1</li>
            <li>option 2.2</li>
        </ul>
    </li>
</ul>
<script>
$(".options li").click(function(){
    $(this).toggleClass("chose");
});
</script>

还有很多 CSS 来处理剩下的事情。

它更改了 ul 列表所在的主 li 元素的类，但我只希望它更改子列表中确切元素的类.

我怎样才能做到这一点，以便父 li 类不会更改，而仅更改实际单击的列表项。但也允许直接选择父 li 元素？

Answer 1

您可以使用 jQuery 的 stopPropagation() 传入事件对象的函数:

$(".options li").click(function(event){
  $(this).toggleClass("chose");
  event.stopPropagation();
});

http://jsfiddle.net/42vsE/

这样，事件只会针对被单击的元素触发，而不会向上冒泡到父元素 <li> .