Javascript 停止点击子项

我的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>

---

它可以工作，但无论我是否单击子菜单，它都会隐藏列表。如何仅在单击根

li

时隐藏项目？我希望最终使子项在单击时具有自己的事件。

检查单击了哪个

目标<代码>e.target

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

---

在子项的单击事件中使用

e.stopPropagation（）

。

尝试创建一个id标记并引用它，而不是类名。这样，您可以按id分隔数据库。

您可以检查是否与相同

这是因为它是触发事件的元素，也是事件侦听器附加到的元素

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