切换同一个班级的一个div

本文介绍了切换同一个班级的一个div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

当几个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(); });

查看实际情况: jsfiddle/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: jsfiddle/mattball/X7p28/