<!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. (二)SpringBoot功能

    web开发 spring boot web开发非常的简单,其中包括常用的json输出.filters.property.log等 json 接口开发 在以前的spring 开发的时候需要我们提供jso ...

  2. 电脑上做的ppt拿到别的电脑或手机上播放的时候字体错位的解决方法

    原因:字体不对!!! 比如你英文用的Calibri字体,但是手机的wps或者别的电脑上的低版本的office没有这个字体,所以就会强制转换成那里有的字体(一般是黑体),此时字体就会错位!! 不要以为那 ...

  3. 【SDOI2017】套路总结

    1 第一题是裸的反演: \[\begin{align} Ans&=\prod_{i=1}^n\prod_{j=1}^ma[(i,j)]\\ &=\prod_{d=1}^na[d]^{f ...

  4. awk notes

    字符串拼接 cat sql | awk '{print " ALTER TABLE  tableA   ALTER " $1 " TYPE " $2 " ...

  5. oracle 索引监控

           索引对于在大量数据里检索出少量数据库的查询操作来说是高效的,可是对于DML操作来说.却是负面的:①其对于insert 操作的反面影响最大.该表的索引越多,更新的索引越多,insert 操 ...

  6. [J2EE规范]JDBC简单例子 标签： 数据库j2eejdbcjava 2017-06-29 10:55 353人阅读 评论(12)

    JDBC是什么? JDBC是java数据库连接(Java Database Connectivity),它是用于java编程语言和数据库之间的数据库无关连接的标准Java API,就是说,JDBC是用 ...

  7. 阿里云发布SaaS加速器，用宜搭，像搭积木一样搭应用

    宜搭让不会编码的人也能快速搭建SaaS应用,大幅提升研发效率. (图:阿里云智能产品管理部总经理马劲在2019阿里云峰会·北京现场进行宜搭应用搭建演示. ) 3月21日,在2019阿里云峰会·北京上, ...

  8. @codeforces - 932G@ Palindrome Partition

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个字符串 s,求有多少种方案可将其划分成偶数个段 \(p_ ...

  9. [React Native]去掉WebStorm中黄色警告

    用WebStorm开发RN难免会碰到一大堆黄色警告.就像下面这样. 其实这个错误并不会影响开发,但是作为一个上升处女座的,我很难忍.于是各种想办法. 上网查了半天发现这篇文章 http://blog. ...

  10. hdu5444 乱搞 长春网赛

    可以暴力. #include<iostream> #include<cstring> #define maxn 1100 using namespace std; int a[ ...