jq实现简单手风琴效果

文章地址：https://www.cnblogs.com/sandraryan/

利用slideUp slideDown动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    ul li {
        background-color: lightblue;
        border: 1px solid white;
         200px;
        text-align: center;
    }
    span {
        display: block;
        color: white;
        line-height: 26px;
    }
    ul {
        list-style: none;
    }
    .box div {
        height: 150px;
         200px;
        background-color: #fff;
        display: none;
    }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <span>title 1</span>
                <div>我是弹出来的div1</div>
            </li>
            <li>
                <span>title 2</span>
                <div>我是弹出来的div2</div>
            </li>
            <li>
                <span>title 3</span>
                <div>我是弹出来的div3</div>
            </li>
            <li>
                <span>title 4</span>
                <div>我是弹出来的div4</div>
            </li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
    $(function(){
        // 每一个span注册点击事件
        $('span').click(function(){
            // 被点击的span的下一个元素（div）滑下去，同时span的父级（li）的相邻兄弟（其他li）划上去
            // slideDown slideUp只会对显示/隐藏的元素起作用
            $(this).next().slideDown().parent().siblings().children('div').slideUp();
        });
    });
    
    </script>
</body>
</html>

最开始只有span会被显示在页面中，点击span会让当前span的相邻兄弟div出现，其他相邻的li执行相反操作（如果可以）

jq实现简单手风琴效果

相关推荐