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

Question

当我点击链接时，所有具有相关类的div都会打开和关闭。

如何将.this函数应用于jquery？ 一世 这是我的代码，我只想激活点击的代码

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

这是html，不幸的是我不允许更改此标记

<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">john.smith@email.com</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>

Answer 1

使用jQuery this运算符包装$：

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

正如一位评论者所提到的，这只有在链接中才有效。 .closest()可以帮助您代替find()，如果它在外面的话。

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

Answer 2

这有效：

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

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

Answer 3

如果链接位于要切换的div内，请尝试使用

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

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

快乐编码。