举个例子
<html> <div id="accord"> <h3>part1</h3> <p> i am part 1</p> <h3>part2</h3> <p>i am part 2</p> <h3>part 3</h3> <p>i am part 3</p> </div> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> <script>$("#accord").on('click','h3',function(e){ //绑定单击事件 $(this).next().slidetoggle(); //深入理解next选择器}) </script> </html>
分析
关键在于理解next方法
以及slidetoggle方法
this指代的是当前元素h3
next选择紧邻的同级别元素，不是说标签相同，比如这个例子p和h3就是同级别
上述是一个链式操作
其中
$(this).next().slidetoggle();
也可以写成
$(this) .next() .slidetoggle();
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
怎样实现根据数组的键值大小排序
laravel实现多用户认证系统
以上就是js的可折叠面板使用详解的详细内容。