<!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. 一些windows server的操作

    windows server2008R2的一些操作和arcgis9.3 服务和arcgis9.3安装 1.在虚拟机中安装: https://jingyan.baidu.com/article/0eb4 ...

  2. python学习笔记08-- socket编程

    本节内容: 一.网络基础知识 二.socket概念及相关语法 2.1socket概念 2.2socket解释 2.3socket模块功能介绍 2.4socket粘包问题 2.5Socket多并发 一. ...

  3. Python数据分析与展示[第三周]（pandas简介与数据创建）

    第三周的课程pandas 分析数据 http://pandas.pydata.org import pandas as pd 常与numpy matplotlib 一块定义 d=pd.Series(r ...

  4. laravel后台扩展包

    https://github.com/the-control-group/voyager

  5. bnd.bnd属性文件格式

    1.Header以大写字母开头 Bundle-Name: StoreAdminProductsTool 2.Instruction以-和小写字母开头 -sources: true 3. Macro形式 ...

  6. IE下的双外边距浮动bug

    最常见且最容易发现的额一个bug是IE 6和最低版本中的双外边距浮动bug.这个bug是任何浮动元素上的外边距加倍. 上面代码中,div盒子向左边浮动,设置的margin-left的值是10px.在c ...

  7. 【时光回溯】【JZOJ3566】【GDKOI2014】阶乘

    题目描述 输入 第一行有一个正整数T,表示测试数据的组数. 接下来的T行,每行输入两个十进制整数n和base. 输出 对于每组数据,输出一个十进制整数,表示在base进制下,n!结尾的零的个数. 样例 ...

  8. Ceph 之 Background on http frontends

    Background on http frontends -civetweb frontend --thread per connection, requires a lot of threads - ...

  9. WPF程序国际化

    1.创建相应的xaml文件 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen ...

  10. 撸了一个微信小程序项目

    学会一项开发技能最快的步骤就是:准备,开火,瞄准.最慢的就是:准备,瞄准,瞄准,瞄准-- 因为微信小程序比较简单,直接开撸就行,千万别瞄准. 于是乎,趁着今天上午空气质量不错,撸了一个小程序,放在了男 ...