結合使用“ 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
  });