使用jQuery單擊錨點時切換最近的內容

Question

我有一個這樣的內容結構：

<a href="#" class="toggle_button">Click me.</a>
<p class="hidden_content">This content is toggleable.</p>

<a href="#" class="toggle_button">Click me.</a>
<p class="hidden_content">This is a different section.</p>

<a href="#" class="toggle_button">Click me.</a>
<p class="hidden_content">This section is also different.</p>

我已經發現了如何使這一部分有效，但是如何做到這一點，所以當我單擊toggle_button時，它僅打開最近的hidden_​​content類。

Answer 1

$('a.toggle_button').click(function() {
    $(this).next('p.hidden_content').toggle();
}

http://api.jquery.com/next/

Answer 2

只需嘗試

$("a").click( function(){
   $(this).next('p').toggle();   
});

工作演示

Answer 3

使用JavaScript很容易，但是您也可以使用：target選擇器來使用純CSS-

<a href="#hiddenContent1" class="toggle_button">Click me.</a>
<p id="hiddenContent1" class="hidden_content">This content is toggleable.</p>

<style>
 .hidden_content{
    display:none;
 }
 .hidden_content:target{
    display:block;
 }
</style>

這是小提琴

Answer 4

這將切換以下div，並停止頁面返回頂部：

$('a.toggle_button').click(function(e) {
    e.preventDefault();
    $(this).next('p.hidden_content').toggle();
}

Answer 5

使用jQuery .next（）選擇器

$(".toggle_button").on("click", function () {
    $(this).next(".hidden_content").toggle();
});