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

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

在子项目的点击事件中使用e.stopPropagation()。

Answer 2

您可以查看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 3

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

停止点击子项目上的点击

3 个答案: