切換最近的內容時，點擊使用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

使用jQuery .next() selector

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

Answer 2

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

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

Answer 3

只是一味

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

Working Demo

Answer 4

這是易與JavaScript，但你也可以留在純CSS與:target selector -

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

Here's a Fiddle

Answer 5

這將觸發以下格，並停止頁面返回頂端：

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