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

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中添加>，请使用>符合标准。