$( this ).next().slideDown( 500 ).parent().siblings().child
标签：
手风琴案例<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } ul { list-style-type: none; } .parentWrap { width: 200px; text-align: center; } .menuGroup { border: 1px solid #999; background-color: #e0ecff; } .groupTitle { display: block; height: 20px; line-height: 20px; font-size: 16px; border-bottom: 1px solid #ccc; cursor: pointer; } .menuGroup>div { height: 200px; background-color: #fff; display: none; } </style> <script src="jquery-1.12.4.js"></script> <script> $(function () { //思路分析：给所有的span注册点击事件，让当前span的兄弟div显示出来 $(".groupTitle").click(function () { //链式编程：在jQuery里面，要领可以一直挪用下去。 $(this).next().slideDown(500).parent().siblings().children("div").slideUp(500); }); }) </script> </head> <body> <ul class="parentWrap"> <li class="menuGroup"> <span class="groupTitle">标题1</span> <div>我是弹出来的div1</div> </li> <li class="menuGroup"> <span class="groupTitle">标题2</span> <div>我是弹出来的div2</div> </li> <li class="menuGroup"> <span class="groupTitle">标题3</span> <div>我是弹出来的div3</div> </li> <li class="menuGroup"> <span class="groupTitle">标题4</span> <div>我是弹出来的div4</div> </li> </ul> </body> </html>
jQuery---手风琴案例
，温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31493.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")