jquery - 在我的案例中，如何使用 jquery 获取指定的选择器？

Question

我想显示 a 标签下面的所有内容，例如 article11 和 article12 mouse entered ▼ in 内容1。

$(function() {
  $("ul#nav span").hover(function() {
    console.log("i am in mouseover");
    $(this).parent().silbings().next().show();
  }, function() {
    console.log("i am in mouse left");
  });
});

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

ul#nav li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  list-style: none;
  text-align: center;
}

a {
  display: block;
  border: 1px solid black;
}

ul#nav>li>ul>li>a {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <li>
    <a href=""><span>▼</span>content1</a>
    <ul>
      <li><a href="">article11</a></li>
      <li><a href="">article12</a></li>
    </ul>
  </li>
  <li>
    <a href=""><span>▼</span>content2</a>
    <ul>
      <li><a href="">article21</a></li>
      <li><a href="">article22</a></li>
    </ul>
  </li>
</ul>

当 this 表示 $("ul#nav span") 时，我尝试指向预期的标签:

$(this).parent().silbings().next()  
$(this).parent()[0].silbings()[0].next()[0]

两者都是错误的。在我的例子中，如何使用 jquery 获取指定的选择器？
纠正我的错字，为什么 $(this).parent().siblings().children() 不能得到预期的元素？

Answer 1

首先，你打错了。正确的方法名称是 siblings() 而不是 silbings()。无论如何您都不需要该调用，因为 next() 适用于同级元素。

其次，当您在同级 ul 元素上调用 show() 时，您的逻辑不起作用。您的 CSS 正在隐藏子 a 元素，因此您需要 find() 它们。另请注意，您可以只调用 toggle() 而不是为 hover() 提供两个处理程序:

$(function() {
  $("ul#nav span").hover(function() {
    $(this).parent().next().find('a').toggle();
  });
});

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

ul#nav li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  list-style: none;
  text-align: center;
}

a {
  display: block;
  border: 1px solid black;
}

ul#nav > li > ul > li > a {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <li>
    <a href=""><span>▼</span>content1</a>
    <ul>
      <li><a href="">article11</a></li>
      <li><a href="">article12</a></li>
    </ul>
  </li>
  <li>
    <a href=""><span>▼</span>content2</a>
    <ul>
      <li><a href="">article21</a></li>
      <li><a href="">article22</a></li>
    </ul>
  </li>
</ul>

然而，综上所述，远仅在 CSS 中执行此操作更有意义。如果您在 a 元素上使用 :hover 伪选择器，您会扩展点击区域以触发菜单显示:

* {
  margin: 0px;
  padding: 0px;
  text-decoration: none;
}

ul#nav li {
  width: 120px;
  height: 30px;
  line-height: 30px;
  float: left;
  list-style: none;
  text-align: center;
}

ul#nav > li > ul {
  display: none;
}
ul#nav > li:hover > ul {
  display: block;
}

a {
  display: block;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="nav">
  <li>
    <a href=""><span>▼</span>content1</a>
    <ul>
      <li><a href="">article11</a></li>
      <li><a href="">article12</a></li>
    </ul>
  </li>
  <li>
    <a href=""><span>▼</span>content2</a>
    <ul>
      <li><a href="">article21</a></li>
      <li><a href="">article22</a></li>
    </ul>
  </li>
</ul>