<!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. pycharm 测试执行成功，但却无法成功生成测试报告（使用HTMLTestRunner）的解决办法

    pycharm 测试执行成功,在对应的测试路径下确未生成测试报告.反复确认代码也是没有问题的,在网上查找了原因:简单的unittest运行是不执行main方法的.是允许方式问题. 于是在mian方法里 ...

  2. 50道python面试题

    1.大数据的文件读取 ① 利用生成器generator ②迭代器进行迭代遍历:for line in file 2.迭代器和生成器的区别 1)迭代器是一个更抽象的概念,任何对象,如果它的类有next方 ...

  3. 源码：自己用Python写的iOS项目自动打包脚本

    http://www.cocoachina.com/ios/20160307/15501.html 什么?又要测试包! 做iOS开发几年了,每天除了码代码,改Bug之外,最让我烦恼的莫过于测试的妹子跑 ...

  4. 【水滴石穿】react-native-app

    项目地址:https://github.com/WQone/react-native-app 这个是一个非常优秀的小姐姐写的,希望大家能够以她为榜样,一起加油进步呀- 先看效果 分析package.j ...

  5. Directx教程(22) 简单的光照模型(1)

    原文:Directx教程(22) 简单的光照模型(1)      在前面的教程中,我们在顶点属性中直接给顶点赋颜色,这样生成的三维物体缺乏真实感,如下图中两个立方体,左边的是通过光照生成物体表面颜色的 ...

  6. day39-Spring 12-Spring的JDBC模板：快速入门

    Spring AOP的关键是它的底层的原理和思想,配置和使用并不是十分困难.AOP本身就是一个思想,是面向对象的延伸,不是用来替换面向对象的,而是用来解决面向对象中的一些问题的.在最初的时候提出过一个 ...

  7. TCPThree_C杯 Day1

    题解 或 正规题解 已经很详细,不再赘述. 跟着wjx打代码,不怕卡题. 忘开long long智障错误第四次左偏树

  8. 【JZOJ4876】【NOIP2016提高A组集训第10场11.8】基因突变

    题目描述 邪恶的707刚刚从白垩纪穿越回来,心中产生了一个念头:我要统治人类! 但是统治人类是很庞大且复杂的一个工程,707尝试了洗脑,催眠,以及武装镇压都没能成功地统治人类,于是她决定从科学上对人类 ...

  9. oracle copy

    用法: COPY FROM <db> TO <db> <opt> <table> {(<cols>)} USING <sel> ...

  10. BZOJ 4034 洛谷3178 树上操作题解

    一个很裸的树链剖分模板.注意一下数据范围,有的地方要开longlong,这就是唯一的陷阱了. # include<iostream> # include<cstdio> # i ...