停止单击启动子项目

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();
  }
});

Answer 2

检查单击了哪个target。e.target。

而是在子项的单击事件中使用e.stopPropagation()。

Answer 3

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