javascript - 停止点击子项目

Question

我的 html 看起来像这样:

<ul>
    <li class="database">Item One
        <ul>
            <li>Sub One</li>
            <li>Sub Two</li>
            <li>Sub Three</li>
        </ul>
    </li>
    <li class="database">Item Two
        <ul>
            <li>Sub One</li>
            <li>Sub Two</li>
            <li>Sub Three</li>
        </ul>
    </li>
<ul>

然后，我创建了此 JavaScript 以在单击时隐藏/显示子列表。

$(document).on('click', 'li.database', function (e) {
    e.stopPropagation();
    $(this).children('ul').children('li').toggle();
});

它可以工作，但是无论我是否单击子菜单，它都会隐藏列表。如何仅在单击根 li 时隐藏项目？我希望最终让子项目在单击时拥有自己的事件。

Answer 1

您可以检查是否 e.target与 e.currentTarget 相同.

这有效是因为 e.target是触发事件的元素，并且 e.currentTarget是事件监听器附加到的元素。

Example Here

$(document).on('click', 'li.database', function (e) {
  if (e.target === e.currentTarget) {
    $(this).children('ul').children('li').toggle();
  }
});