结合使用“ this”和jQuery Selectors

Question

我有一些看起来像这样的HTML：

<ul class="faq">
    <li class="open">
        <a class="question" href="">This is my question?</a>
        <p>Of course you can, it will be awesome. </p>
    </li>
</ul>

使用CSS我将p标签设置为display:none; 。 单击anchor时，我想使用jQuery显示或隐藏p标签，但是同级选择器遇到了一些麻烦。

只是试图使选择器工作，我尝试过：

$("a.question").click(function () {
    $(this + " ~ p").css("background-color", "red");
});

测试一下。 看来，同级选择器实际上不能像那样使用，而且由于我是jQuery的新手，所以我不知道实现该目标的适当方法。

Answer 1

尝试使用：

$(this).siblings('p').css()

Answer 2

$(this).next("p").css("...")

如果您只想要DOM中的下一个非空白节点，则上面的“ p”是可选的。

Answer 3

我想使用jQuery在单击锚点时显示或隐藏'p'标签

既然您提到您想在单击锚点时切换'p'标签，所以我愿意：

  $("a.question").click(function (event) {
      $(this).siblings('p').show(); //toggle the p tags that are siblings to the clicked element
      event.preventDefault(); //stop the browser from following the link
  });