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来处理其余的事情。

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

我怎么能这样做，以便父li类不会改变，但只点击了实际的列表项。但也允许直接选择父li元素？

Answer 1

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

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

http://jsfiddle.net/42vsE/

这样，事件只会针对被点击的元素触发，并且不会冒泡到父<li>。

Answer 2

<script>
$(".options li ul li").click(function(){
    var $this = $(this);
    var parentli = $this.parent().parent();

    $this.toggleClass("chose");
    parentli.doSomething();
});
</script>

应该可以正常工作。

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

2 个答案: