文章地址：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执行相反操作（如果可以）

jq实现简单手风琴效果的更多相关文章

  1. jq实现多级手风琴效果

    /*左侧*/ .wrapper, .main { height: 100%; z-index: 9 } .main { position: relative; } .main_L { width: 2 ...

  2. JS+JQ手风琴效果

    最新在学习JS写一些实用的小玩意——手风琴 CSS样式: <style type="text/css"> * { margin: 0px; border: 0px; p ...

  3. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  4. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  5. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  6. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

  9. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

随机推荐

  1. HDU3887 Counting Offspring [2017年6月计划 树上问题03]

    Counting Offspring Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  2. Google earth爬取卫星影像数据并进行标注路网的方法

    一.下载goole earth 和GetScreen: 试了很多,找了可以使用的上传到百度网盘,链接如下所示: 链接:https://pan.baidu.com/s/1fp-W8u68iRsJ0xcu ...

  3. 微信小程序--轮播图，标题，盒子，tab栏的合成例子

    小程序是什么? 微信小程序,是一种不需要下载安装即可使用的应用,用户扫一扫或搜一下即可打开应用,在微信-发现-小程序可打开应用. 一.小程序的样式编写: 目录结构: app.json { " ...

  4. PHP的注释规范

    <?php //注释规范 /** *函数的功能 *@param 参数类型 参数名1 参数解析 *@param 参数类型 参数名2 参数解析 *@return 返回值类型 返回值解析 *@auth ...

  5. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  6. NOIP模拟 17.8.20

    NOIP模拟17.8.20 A.阶乘[题目描述]亲爱的xyx同学正在研究数学与阶乘的关系,但是他喜欢颓废,于是他就制作了一个和阶乘有关系的数学游戏:给出两个整数 n,m,令 t = !n,每轮游戏的流 ...

  7. ConvertJavaMiliSecondToDateTime

    private static DateTime ConvertJavaMiliSecondToDateTime(long javaMS)        {            DateTime UT ...

  8. mkdir、touch、rm和rmdir命令

    一.mkdir命令 mkdir命令用来创建目录.该命令创建由dirname命名的目录.如果在目录名的前面没有加任何路径名,则在当前目录下创建由dirname指定的目录:如果给出了一个已经存在的路径,将 ...

  9. blogbeta1

    //html <!DOCTYPE html> blog 身高:170 体重:230 座右铭 再给我吃一口 关于我 微信 微博 标签 SM SP 重金求爹 2019/11/16 本人找爹,带 ...

  10. input输入框限制录入类型

    输入大小写字母.数字.下划线:<input type="text" onkeyup="this.value=this.value.replace(/[^\w_]/g ...