当点击切换时，jquery所有div打开和关闭
问题描述：
当我点击一个链接时，所有的div打开和关闭相关的类。当点击切换时，jquery所有div打开和关闭
如何将.this函数应用于jQuery？ 我 这是我的，我只想激活被点击
$(document).ready(function(){
//On Click
$('.collapseLink').click(function(){
$('.revealBoxContents').stop(true, true).slideToggle('slow');
});
});
这里是不幸的是，我不能改变这个标记
<div class="revealBox revealBoxClosed">
<div class="revealBoxTop">
<h3>About You</h3>
<a class="collapseLink" title="" href="javascript:void(0);"><span class="dottedBot">Hide information</span><img width="16" height="16" class="detailListActions" alt="-" src="Resources/Images/BBG/main/minus.gif"></a> </div>
<!-- /revealBoxTop -->
<div class="revealBoxContents" style="display: block;">
<div class="detailListHead pad10">
<span class="floatLeft">Details about you </span>
<span class="floatRight">Edit</span>
<div class="clearBoth"></div>
</div>
<ul class="revealDetailsList">
<li class="table shadedList ">
<div class="tableRow">
<span class="detailCell detailLabel">Your Name:</span>
<p class="detailResult">Mr John Smith</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table">
<div class="tableRow">
<span class="detailCell detailLabel">Gender:</span>
<p class="detailResult">Male</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table shadedList ">
<div class="tableRow">
<span class="detailCell detailLabel">Date of Birth:</span>
<p class="detailResult">11/11/1977</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table">
<div class="tableRow">
<span class="detailCell detailLabel">Postal Address:</span>
<p class="detailResult">1 Buchanan Street, Derby, Derbyshire, DE1 3BZ 1 Buchanan Street, Derby, Derbyshire, DE1 3BZ</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table shadedList ">
<div class="tableRow">
<span class="detailCell detailLabel">Relationship Status:</span>
<p class="detailResult">Married</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table">
<div class="tableRow">
<span class="detailCell detailLabel">Daytime/Mobile Telephone:</span>
<p class="detailResult">01977 123245</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table shadedList ">
<div class="tableRow">
<span class="detailCell detailLabel">Email Address:</span>
<p class="detailResult">[email protected]</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table">
<div class="tableRow">
<span class="detailCell detailLabel">Date you wish your insurance to start:</span>
<p class="detailResult">2/03/2011</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table shadedList ">
<div class="tableRow">
<span class="detailCell detailLabel">Employment Status:</span>
<p class="detailResult">Employed</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table">
<div class="tableRow">
<span class="detailCell detailLabel">Your Occupation:</span>
<p class="detailResult">Marketing Manager</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table shadedList ">
<div class="tableRow">
<span class="detailCell detailLabel">Business Type:</span>
<p class="detailResult">Insurance Broker</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
<li class="table lastLi">
<div class="tableRow">
<span class="detailCell detailLabel">Joint Policy Holder:</span>
<p class="detailResult">Mrs Jane Smith</p>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" alt="?" src="Resources/Images/BBG/main/iconq.gif"></a>
<a class="detailCell detailListActions" title="" href="javascript:void(0);"><img width="16" height="16" class="marginRight10" alt="Edit" src="Resources/Images/BBG/eqs/edit.gif"></a>
</div><!-- /tableRow -->
</li>
</ul><!-- /revealDetails -->
<div class="relative">
<a class="collapseLink floatRight" title="" href="javascript:void(0);"><span class="dottedBot">Hide information</span><img width="16" height="16" class="detailListActions" alt="?" src="Resources/Images/BBG/main/minus.gif"></a>
</div>
</div><!-- /revealBoxContents -->
</div>
答
您HTML中的一个代码包裹this与jQuery的$操作者：
$(document).ready(function(){
//On Click
$('.collapseLink').click(function(){
$(this).parent().next(".revealBoxContents").stop(true, true).slideToggle('slow');
});
});
正如一位评论者所提到的，第只有在链接内才能使用。如果在外面，.closest()可以帮助您代替find()。
如果您发布您的HTML，我们可能会帮助更多。
答
这个工程：
$(document).ready(function() {
//On Click
$('.collapseLink').click(function() {
$(this).parent().next('div.revealBoxContents').stop(true, true).slideToggle();
});
});
看看这个的jsfiddle：http://jsfiddle.net/RVjbY/1/
答
如果链接是要切换div里面，试试这个
$(document).ready(function(){
//On Click
$('.collapseLink').click(function(){
$(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow');
});
});
基本上，想法是选择切换div，相对于点击链接（通常使用this）;
快乐编码。
这不起作用。它会切换崩溃链接而不是'.revealBoxContents' – Fender 2011-05-24 12:30:26
@Fender - 添加一个'find（）'它应该解决这个问题。 – 2011-05-24 12:32:48
只有在.revealBoxContents位于链接中时才有效，否则，您需要某种方式将每个内容框与链接相关联，但使用数据（数据短划线）属性 – bigblind 2011-05-24 12:36:01