<!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{

        width: 200px;text-align: center;

        border: 1px solid black;background-color: rgb(171, 189, 247);

    }

    /* 不定高度 */

    span {display: block; line-height: 25px;}

    ul{list-style: none;}

    .box div {

        width: 200px;height: 100px;border-bottom: 1px solid black;

        display: none;background-color: #fff;

    }

    </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").click(function(){

             $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);

            });

            // span的下一个元素（div）设置slideDown

            // span的父亲（当前li）的相邻兄弟（其他li）的儿子div设置slideUp

        });

    </script>

</body>

</html>

https://www.cnblogs.com/sandraryan/

手风琴jq实现的更多相关文章

  1. 手风琴图片和钢琴导航栏JQ滑动特效

    手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. JS+JQ手风琴效果

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

  3. 用JQ帮你实现动画导航 手风琴是导航与下拉导航

    1.手风琴式导航,既可以适用于移动端也可使用与PC端 <!DOCTYPE html> <html> <head> <meta charset="UT ...

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

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

  5. jq手风琴---点击时列表的左边距逐渐减小

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. jq手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jq实现简单手风琴效果

    文章地址:https://www.cnblogs.com/sandraryan/ 利用slideUp slideDown动画 <!DOCTYPE html> <html lang=& ...

  8. 纯js代码实现手风琴特效

    我知道现在大多数前端开发人员都在使用jQuery等第三方的库来进行开发,这不仅节约了时间,也让效率大大的提高,并让公司的效益增加,何乐而不为呢? 但是,这也会有一定的缺点,比如jQ比js慢,尤其在大型 ...

  9. JQ实现accordion(可折叠)效果

    先看效果--这个就是手风琴的效果:          原理:首先默认section1下面的dd可见,其他的全部隐藏:当点击某个obj时候,  快速隐藏全部的dd,然后只有obj.NEXT().show ...

随机推荐

  1. Linux安装MariaDB（Mysql）和简单配置 mariadb

    Linux安装MariaDB(Mysql)和简单配置 1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动Ma ...

  2. python ndarray相关操作：转置、翻转

  3. [J2EE规范]RMI简单实例 标签： j2ee实例 2017-06-29 18:05 217人阅读 评论(13)

    RMI是什么? RMI是指Java Remote Method Invocation,远程方法调用,RMI是Java的一组拥护开发分布式应用程序的API.RMI使用Java语言接口定义了远程对象,它集 ...

  4. JFinalConfig

    概述 基于JFinal的web项目需要创建一个继承自JFinalConfig类的子类,该类用于对整个web项目进行配置. JFinalConfig子类需要实现六个抽象方法,如下所示: public c ...

  5. Java版阿里云通信短信发送API接口实例（新）

    阿里云通信(原名阿里大于)的短信服务(Short Message Service)是阿里云为用户提供的一种通信服务的能力,支持快速发送短信验证码.短信通知等. 完美支撑双11期间2亿用户,发送6亿短信 ...

  6. @Transactional注解事务

    打了这个注解的类或者方法表示该类里面的所有方法或者这个方法的事务由spring处理,来保证事务的原子性,即方法里面对数据库操作,如果失败则spring负责回滚操作,成功提交操作 一.特性 1.serv ...

  7. oracle编写分页过程

    有了上面的基础,相信大家可以完成分页存储过程了,要求,请大家编写一个存储过程,要求可以输入表名.每页显示记录数.当前页.排序字段(deptno降序).返回总记录数,总页数和返回结果集. 把一个字符串, ...

  8. 使用pip出现 cannot import name "main"

    最近在linux使用pip install时遇到了这个报错 1.jpg ImportError: cannot import name main 遇到这个问题,我的解决办法是:cd 到usr/bin目 ...

  9. Gulp和webpack的作用和区别

    gulp是工具链.构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作 1.构建工具 2.自动化 3.提高效率用 webpack是文件打包工具,可以把项目的各种js文 ...

  10. 我的iOS高效编程秘诀—坚持编程习惯

    http://www.cocoachina.com/programmer/20150819/13103.html 作者:sunljz 授权本站转载. 习惯会影响一个人做事的方式,也会直接影响效率.我经 ...