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没有绑定到click事件处理程序（并且它不能根据我的要求）。但是ul.dropdown中的Add绑定到了click事件处理程序，尽管我已经指定li的最后一个子节点不应绑定。因此，它会删除父项目，即“支持”。

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)'

Answer 2

您需要“直接后裔”操作符>才能直接在特定<li>元素下指定<ul>元素。

这里的问题是选择器的这一部分：ul.left li

匹配如下：

0:<li><a href="#">First</a></li>
1:<li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
2:    <li><a href="#">First Sub</a></li>
3:    <li><a href="#">Add</a></li>
    </ul>
  </li>
4:<li><a href="#">Add</a></li>

所以:not(:last-child)只会杀掉最后一个li（<li><a href="#">Add</a></li>）

使用ul.left>li，您只会获得匹配：

0:<li><a href="#">First</a></li>
1:<li class="has-dropdown">
    <a href="#">Support</a>
    <ul>
      <li><a href="#">First Sub</a></li>
      <li><a href="#">Add</a></li>
    </ul>
  </li>
2:<li><a href="#">Add</a></li>

您正在寻找的完整选择器是：

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

Answer 3

如果我是你，我可能只会在add按钮上添加一个课程。

HTML

<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 class="add"><a href="#">Add</a></li>
    </ul>
  </li>
  <li class="add"><a href="#">Add</a></li>
</ul>

的jQuery

$('ul.left li:not(.add)').click(function(e) {
  e.stopPropagation();
  var ul = this.parentNode;
  ul.removeChild(this);
});

不将事件绑定到li项目之一

3 个答案: