當點擊切換時，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打開和關閉

回答

相關問題