切换同一个班级的一个div [英] Toggle one div with same class

问题描述

当几个div与jQuery具有相同的类时，如何使用 Toggle ?我只想在点击时显示一个div.

JavaScript

$(".help_content").hide();
$(".help_target").click(function()
{
    $('.help_content').toggle(); // I also tried with $(".help_content").show();
});

HTML

<div id="foo">
    <p class="help_target">
            <a href="#">Click</a>
    </p>
</div>
<p class="help_content">Asia</p>

<div id="some">
    <p class="help_target">
        <a href="#">Click</a>
    </p>
</div>
<p class="help_content">Africa</p>

我不能使用 next()，因为.help_content不是.help_target的后代. (我想在字段集中使用.help_target并在字段集中显示.help_content.)

解决方案

您可以执行以下操作:

$(".help_content").hide();
$(".help_target").click(function()
{
    $(this).parent().next('.help_content').toggle();
});

查看实际情况: http://jsfiddle.net/mattball/X7p28/

How to use Toggle when several div have the same class with jQuery? I want to show just one div on click.

JavaScript

$(".help_content").hide();
$(".help_target").click(function()
{
    $('.help_content').toggle(); // I also tried with $(".help_content").show();
});

HTML

<div id="foo">
    <p class="help_target">
            <a href="#">Click</a>
    </p>
</div>
<p class="help_content">Asia</p>

<div id="some">
    <p class="help_target">
        <a href="#">Click</a>
    </p>
</div>
<p class="help_content">Africa</p>

I can't use next() since .help_content is not a descendant of .help_target. (I want to use .help_target in fieldsets and display .help_content out of fieldsets).

解决方案

You can do this:

$(".help_content").hide();
$(".help_target").click(function()
{
    $(this).parent().next('.help_content').toggle();
});

See it in action: http://jsfiddle.net/mattball/X7p28/

这篇关于切换同一个班级的一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！