在我的情况下，如何使用jquery获取指定的选择器？

Question

我想显示a标签下面的所有内容，例如在article11中输入article12的{​​{1}}和▼鼠标。

content1

$(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>表示$（“ ul＃nav span”）时，我尝试指向期望的标签：

this

这两个都是错误的。在我的情况下，如何用jquery获取指定的选择器？
要纠正我的错字，为什么$(this).parent().silbings().next() $(this).parent()[0].silbings()[0].next()[0] 无法获得预期的元素？

Answer 1

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

第二，您的逻辑不起作用，因为您正在对同级show()元素上的ul进行调用时（该元素已经显示）。您的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中执行 far 更为有意义。如果您在:hover元素上使用a伪选择器，则会扩展点击区域以触发菜单出现：

* {
  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>