单击另一个列表项中的一个列表项

Question

这是我的小提琴： http : //jsfiddle.net/1ozc7uqr/

当我单击每个列表项时尝试显示<p>时，列表项中可能有一个列表。

问题是当单击嵌套的<li>其父<p>显示。

的HTML

<ul class="list">
<li>Item 1
    <p>>> Item 1 P</p>
    <ul>
        <li>Item 1.1
            <p>>> Item 1.1 P</p>
        </li>
        <li>Item 1.2
            <p>>> Item 1.2 P</p>
        </li>
        <li>Item 1.3
            <p>>> Item 1.3 P</p>
        </li>
    </ul>
</li>
<li>Item 2
    <p>>> Item 2 P</p>
</li>
<li>Item 3
    <p>>> Item 3 P</p>
</li>
</ul>

的JavaScript

$(document).ready(function () {
   $(".list li").click(function () {
      $(this).find("p").eq(0).toggle();
   });
});

Answer 1

如@Barmar所建议，请使用event.stopPropagation()来防止事件将DOM冒泡到父li元素。

http://jsfiddle.net/1ozc7uqr/3/

$(document).ready(function () {
    $(".list li").click(function (e) {
        e.stopPropagation();
        $(this).find("p").eq(0).toggle();
    });
});

另外，如果要在HTML中添加> ，请使用> 符合标准。