文章地址: 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; width: 200px;
- text-align: center; } span { display: block; color: white; line-height:
- 26px; } ul { list-style: none; } .box div { height: 150px; width: 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 执行相反操作(如果可以)
来源: http://www.bubuko.com/infodetail-3264404.html