<!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. temp for @青

    4层方法 IBaseController  BaseControllerImpl IBaseService BaseServiceImpl  IBaseComponent   IBaseCompone ...

  2. Java1.8新特性 - Stream流式算法

    一. 流式处理简介   在我接触到java8流式数据处理的时候,我的第一感觉是流式处理让集合操作变得简洁了许多,通常我们需要多行代码才能完成的操作,借助于流式处理可以在一行中实现.比如我们希望对一个包 ...

  3. SpringBoot启动报错Failed to determine a suitable driver class

    SpringBoot启动报错如下 Error starting ApplicationContext. To display the conditions report re-run your app ...

  4. 重磅发布：阿里开源 Open JDK 长期支持版本 Alibaba Dragonwell

    3 月 21 日北京阿里云峰会,阿里巴巴正式宣布对外开源 OpenJDK 长期支持版本 Alibaba Dragonwell.作为 Java 全球管理组织 Java Community Process ...

  5. Find Minimumd in Rotated Sorted Array

    二分搜索查最小数,from mid to分别为区间的第一个,中位数,和最后一个数 if(from<=mid&&mid<=to)//顺序,第一个即为最小值 return fr ...

  6. Python Unittest根据不同测试环境跳过用例详解

    虽然现在用的Katalon,不过这篇Unittest基本的用法讲的还是不错的 转自:https://mp.weixin.qq.com/s/ZcrjOrJ1m-hAj3gXK9TjzQ 本文章会讲述以下 ...

  7. SFINAE and enable_if

    There's an interesting issue one has to consider when mixing function overloading with templates in ...

  8. 【JZOJ4869】【NOIP2016提高A组集训第9场11.7】平均数

    题目描述 数据范围 解法 二分答案. 对于一个答案mid,要求出区间平均数小于mid的个数ans. 给所有数减去mid,那么问题转化为求出所有区间和为负数的个数. 对于一个区间[l,r],如果sum[ ...

  9. 1-1.go开发工具安装

    (1) (2) bin:go的可执行文件 src:go的源代码 (3)安装开发工具 安装:goland-2018.1.1.exe 将.jar文件复制到工具的bin目录下   用记事本打开“goland ...

  10. Go语言开发教程

    Go语言简述 兴起:2009年Gogle发布的第二款开源编程语言 特征: 语法简单:语法标准比较严格,适合开发人员短时间高效的服务端开发. 并发模型:Goroutine是Go最显著的特征,使用类协程的 ...