Question

如果我这样做：

$("a").on("click", function(e) {
    $(this).parent().find("ul").toggleClass("closed opened");
    e.preventDefault();
});

它有效，但它将针对父母的所有人

所以我在做

$("a").on("click", function(e) {
    $(this).parent().next("ul").toggleClass("closed opened");
    e.preventDefault();
});

但这不起作用，我根本没有错误。

如果我使用这里使用的html对JSFiddle进行以下工作：

$("a").on("click", function(e) {
    $(this).next("ul").toggleClass("closed opened");
    e.preventDefault();
});

没有意义。我需要定位我要点击的父元素的第一个<ul>子元素。

<ul>
  <li><a href="">Text</a>
     <ul class="closed">
        <li><a href="">Two</a>
           <ul class="closed">
              <li><a href="">Three</a>
                <ul class="closed">
                   <li><a href="">Four</a></li>
                </ul>
              </li>
           </ul>
         </li>
     </ul>
   </li>
</ul>

.closed {
    display: none;
}

.opened {
    display: block;
}

JSFiddle使用示例中使用的html

更新

感谢评论，因为我的真实html有一个<span>元素，我不得不使用 .nextAll()

实际HTML

<ul>
  <li>
     <a href="">Text</a>
     <span></span>
     <ul class="closed">
        <li>
           <a href="">Two</a>
           <span></span>
           <ul class="closed">
              <li>
                <a href="">Three</a>
                <span></span>
                <ul class="closed">
                   <li><a href="">Four</a></li>
                </ul>
              </li>
           </ul>
         </li>
     </ul>
   </li>
</ul>

This is the JSFidle with the real html

Answer 1

点击的a元素的父元素是li元素。父li元素的下一个兄弟元素只能是其他li元素。所以脚本根本无法选择目标元素，它实际上是有意义的，因为.next只选择下一个[匹配]兄弟姐妹。

幸运的是，你有一个正常工作的版本！

Answer 2

您要找的是siblings()而不是next()

$("a").on("click", function(e) {
    $(this).siblings("ul").toggleClass("closed opened");
    e.preventDefault();
});

next未与您合作的原因在于您尝试使用它的方式。您先使用parent()，然后要求获取next()类型的ul元素，这与next的工作方式不符。

因为在您的DOM结构中，next后的parent元素将成为您的锚标记，next只会与匹配你的dom中的第一个元素，而不是与你的选择器匹配的第一个元素，这是你误用的根本原因。

考虑使用选择器的next如何工作的官方说明：

该方法可选地接受我们可以传递给$（）函数的相同类型的选择器表达式。如果紧随其后的兄弟匹配选择器，它将保留在新构造的jQuery对象中;否则，它被排除在外。

nextall也可以做到这一点。

Answer 3

试试这个：

$("a").on("click", function(e) {
    $(this).closest("ul").toggleClass("closed opened");
    e.preventDefault();
});

Answer 4

目的：

我需要定位我点击的父元素的第一个孩子

尝试：

$(this).next("ul").toggleClass("closed opened");

<a>或$(this)有<ul>作为兄弟，所以直接从$(this)引用.next()时使用正确的方法就是问题。在我理解的情况下，没有必要在这种情况下引用父母。

FIDDLE

.parent（）。next（）无效

4 个答案:

目的：

尝试：