当点击切换时，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>

来源

2011-05-24 sat

您HTML中的一个代码包裹this与jQuery的$操作者：

$(document).ready(function(){ 
    //On Click 
    $('.collapseLink').click(function(){ 
     $(this).parent().next(".revealBoxContents").stop(true, true).slideToggle('slow'); 
    }); 
});

正如一位评论者所提到的，第只有在链接内才能使用。如果在外面，.closest()可以帮助您代替find()。

如果您发布您的HTML，我们可能会帮助更多。

来源

2011-05-24 12:27:41

这不起作用。它会切换崩溃链接而不是'.revealBoxContents' – Fender 2011-05-24 12:30:26

@Fender - 添加一个'find（）'它应该解决这个问题。 – 2011-05-24 12:32:48

只有在.revealBoxContents位于链接中时才有效，否则，您需要某种方式将每个内容框与链接相关联，但使用数据（数据短划线）属性 – bigblind 2011-05-24 12:36:01

这个工程：

$(document).ready(function() { 
    //On Click 
    $('.collapseLink').click(function() { 
     $(this).parent().next('div.revealBoxContents').stop(true, true).slideToggle(); 
    }); 
});

看看这个的jsfiddle：http://jsfiddle.net/RVjbY/1/

来源

2011-05-24 12:31:54 Fender

嗨有链接是在上面的元素想要打开和关闭，但他们都在一个父div – sat 2011-05-24 12:35:43

好吧，我会编辑它 – Fender 2011-05-24 12:37:30

如果链接是要切换div里面，试试这个

$(document).ready(function(){ 
    //On Click 
    $('.collapseLink').click(function(){ 
     $(this).parents('.revealBoxContents').stop(true, true).slideToggle('slow'); 
    }); 
});

基本上，想法是选择切换div，相对于点击链接（通常使用this）;

快乐编码。

来源

2011-05-24 12:34:35 simplyharsh

链接是在div上面想要切换 – sat 2011-05-24 12:39:14

谢谢你的帮助！！ – sat 2011-05-24 14:09:04

当点击切换时，jquery所有div打开和关闭

回答

相关问题