嵌套列表中的jQuery父母/孩子

Question

在jQuery中，parents（）和children（）的行為與我期望的嵌套列表不同。 一個例子：

<ul>
    <li>item 1
        <ul>
            <li>item a</li>
            <li>item b
                <ul>
                    <li>item i</li>
                </ul>
            </li>          
            <li>item c</li>
        </ul>
    </li>
    <li>item 2</li>
</ul>

和javascript：

$( 'li' ).click(function(event) {
    $( 'ul' ).not( $(this).parents() ).hide();
    $( this ).children().show();
});

如果我單擊“項目b”，則“項目i”將隱藏。 似乎“ item i”是“ item b”的子代，應顯示為$（this）.children（）。show（）

我有語法問題，還是在DOM中誤解了孩子/父母？

有關工作示例，請參見https://jsfiddle.net/8o71yfpf/ 。

Answer 1

您應該使用event.stopPropagation();

當您單擊內部li時，您也單擊了父li。

更新了https://jsfiddle.net/8o71yfpf/2/

它可能有助於了解DOM遍歷http://www.richfinelli.com/understanding-dom-traversal-in-jquery/