<jQuery> 七. 手風琴案例
阿新 • • 發佈:2018-01-10
調用 事件 htm rip function div bsp body rap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.2.1.js"></script> <script> $(function () { // 隱藏所有的div $(".parentWrap>li>div").hide();// 註冊事件span $(".groupTitle").click(function () { // 鏈式編程, 在jQuery裏, 方面可以一直調用下去 $(this).next().show().parent().siblings().children("div").hide(100); }); }); </script> </head> <body> <ul class="parentWrap"> <liclass="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> 七. 手風琴案例