当点击特定的li元素 – 我想要能够打开它的相应的div元素.
<ul class="no-padding pro-list"> <li><a href="#" class="pro-1 pro">A</a> <div class="proc-description panel-1"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="pro-2 pro">B</a> <div class="proc-description panel-2"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="pro-3 pro">C</a> <div class="proc-description panel-3"> <p>a</p> <p>b</p> <p>c</p> </div> </li> <li><a href="#" class="pro-4 pro">D</a> <div class="proc-description panel-4"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="pro-5 pro">E</a> <div class="proc-description panel-5"> Hello World! Lorem ipsum doner inut. <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="pro-6 pro">F</a> <div class="proc-description panel-6"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="pro-7 pro">G</a> <div class="proc-description panel-7"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="pro-8 pro">H</a> <div class="proc-description panel-8"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p> Lorem ipsum doner inut. Lorem ipsum doner inut. </p> </div> </li> <li><a href="#" class="proc-9 ">I</a></li> <li><a href="#" class="proc-10 ">J</a></li> <li><a href="#" class="proc-11 ">K</a></li> </ul>
当我添加这个脚本时它工作正常:
<script> jQuery(document).ready(function ($) { jQuery(".pro-2").click(function () { jQuery(".panel-2").slidetoggle("slow"); }); }); </script>
解决方法
您应该将事件与普通类绑定,然后使用遍历方法来识别要处理的元素.
您可以使用已添加的pro类添加到锚和proc-description添加到div.
使用
jQuery(document).ready(function($){ jQuery("a.pro").click(function(){ jQuery(this).next(".proc-description").slidetoggle("slow"); return false; }); });
jQuery(document).ready(function($){ jQuery("a.pro").click(function(){ jQuery(this).next(".proc-description").slidetoggle("slow"); }); });
.proc-description {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="no-padding pro-list"> <li><a href="#" class="pro-1 pro">A</a> <div class="proc-description panel-1"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="pro-2 pro">B</a> <div class="proc-description panel-2"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="pro-3 pro">C</a> <div class="proc-description panel-3"> <p>a</p> <p>b</p> <p>c</p> </div> </li> <li><a href="#" class="pro-4 pro">D</a> <div class="proc-description panel-4"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="pro-5 pro">E</a> <div class="proc-description panel-5">Hello World! Lorem ipsum doner inut. <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="pro-6 pro">F</a> <div class="proc-description panel-6"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="pro-7 pro">G</a> <div class="proc-description panel-7"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="pro-8 pro">H</a> <div class="proc-description panel-8"> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut.</p> <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p> </div> </li> <li><a href="#" class="proc-9 ">I</a> </li> <li><a href="#" class="proc-10 ">J</a> </li> <li><a href="#" class="proc-11 ">K</a> </li> </ul>
原文地址:https://www.jb51.cc/jquery/176764.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。