javascript - 未将事件绑定(bind)到 li 项目之一

Question

我有这个导航栏代码

<ul class="left">
  <li><a href="#">First</a></li>
  <li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
      <li><a href="#">First Sub</a></li>
      <li><a href="#">Add</a></li>
    </ul>
  </li>
  <li><a href="#">Add</a></li>
</ul>

我的 js 文件中有这个事件处理程序

$('ul.left li:not(:last-child), ul.dropdown li:not(:last-child)').click(function(e) {
  e.stopPropagation();
  var ul = this.parentNode;
  ul.removeChild(this);
});

问题:ul.left 中的 Add 未绑定(bind)到单击事件处理程序(并且它不能根据我的要求)。但是 ul.dropdown 中的 Add 已绑定(bind)到单击事件处理程序，尽管我已指定不应绑定(bind) li 的最后一个子级。因此，它删除了父 li 项，即“Support”。

Answer 1

问题是你没有一个名为 dropdown 的类，你有一个名为 has-dropdown 的类，所以 ul.dropdown li:not(: last-child) 选择器根本不起作用。最重要的是，您的第一个选择器 ul.left li:not(:last-child) 将覆盖内部列表中的所有 li 元素，因此您还需要将第一个选择器更改为类似于:ul.left > li:not(:last-child)，以便仅选择第一个列表的直接后代的 li 元素。

因此，如果您只更改 js，请将选择器更改为:

'ul.left > li:not(:last-child), ul.has-dropdown > li:not(:last-child)'