0

我有这样的内容结构:

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

我已经发现了如何使用一个部分进行这项工作,但是我怎样才能做到这一点,以便当我单击一个切换按钮时,它只打开最近的 hidden_​​content 类。

4

5 回答 5

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

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

于 2013-07-25T15:40:39.790 回答
1

只需尝试

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

工作演示

于 2013-07-25T15:42:22.880 回答
1

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

这是一个小提琴

于 2013-07-25T15:43:16.600 回答
0

这将切换以下 div,并停止页面返回顶部:

$('a.toggle_button').click(function(e) {
    e.preventDefault();
    $(this).next('p.hidden_content').toggle();
}
于 2013-07-25T15:51:35.667 回答
-1

使用jQuery .next() 选择器

$(".toggle_button").on("click", function () {
    $(this).next(".hidden_content").toggle();
});
于 2013-07-25T15:39:00.163 回答