1. 程式人生 > ><jQuery> 七. 手風琴案例

<jQuery> 七. 手風琴案例

調用 事件 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"> <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> 七. 手風琴案例