微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

当单击切换时，jQuery会打开和关闭所有div

分类：编程问答

如何解决当单击切换时，jQuery会打开和关闭所有div

| 当我单击链接时，所有具有相关类的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,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>
    

解决方法

您用jQuery
$
运算符将
this
包装起来： 
$(document).ready(function(){   
    //On Click
    $(\'.collapseLink\').click(function(){
        $(this).parent().next(\".revealBoxContents\").stop(true,true).slideToggle(\'slow\');
    });
});
正如一位评论者所提到的，只有在链接中，它才会起作用。如果不在外面，outside5ѭ可能会代替you6ѭ。 如果您发布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
）； 编码愉快。     

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native