文章地址：https://www.cnblogs.com/sandraryan/

利用slideUp slideDown动画

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

        background-color: lightblue;

        border: 1px solid white;

        width: 200px;

        text-align: center;

    }

    span {

        display: block;

        color: white;

        line-height: 26px;

    }

    ul {

        list-style: none;

    }

    .box div {

        height: 150px;

        width: 200px;

        background-color: #fff;

        display: none;

    }

    </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注册点击事件

        $('span').click(function(){

            // 被点击的span的下一个元素（div）滑下去，同时span的父级（li）的相邻兄弟（其他li）划上去

            // slideDown slideUp只会对显示/隐藏的元素起作用

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

        });

    });

    </script>

</body>

</html>

最开始只有span会被显示在页面中，点击span会让当前span的相邻兄弟div出现，其他相邻的li执行相反操作（如果可以）

jq实现简单手风琴效果的更多相关文章

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

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

  2. JS+JQ手风琴效果

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

  3. 超简单jQuary链式操作代码实现手风琴效果

    超简单jQuery代码实现手风琴效果 HTML代码 <div id="cont"> <div> <p>人生若只如初见</p> < ...

  4. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  5. 基于css3实现手风琴效果

    终于在凌晨一点钟逼迫自己写博客.一直想记录自己的前端工程师之路,但毕竟拖延症晚期.因为第一篇随笔,所以多写一点废话吧.刚刚从学校毕业,放弃了一直学习的java,而想从事前端的工作.第一是觉得osgi这 ...

  6. jquery 图片手风琴效果

    这篇主要是手风琴效果和无缝切换相结合,在Demo里的Demo3.html.Demo4.html. 手风琴原理比较简单,当鼠标经过的时候改变图片的路径,鼠标移到另一张图片时还原路径. 虽然原理简单,但是 ...

  7. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  8. Bootstrap手风琴效果

    前面的话 Bootstrap 框架中 Collapse插件(折叠)其实就是我们常见的手风琴效果.当单击一个触发元素时,在另外一个可折叠区域进行显示或隐藏,再次单击时可以反转显示状态.经典的场景是多个折 ...

  9. js实现手风琴效果

    之前在慕课网上有练习手风琴效果,但是老师使用jquery简简单单的两三行实现了,今天自己用js练习一下效果 <div id="divbox"> <ul> & ...

随机推荐

  1. 洛谷P2667 超级质数 [2017年6月计划 数论05]

    P2667 超级质数 题目背景 背景就是描述,描述就是背景...... 题目描述 一个质数如果从个位开始,依次去掉一位数字,两位数字,三位数字......直到只剩一位数字中间所有剩下的数都是质数,则称 ...

  2. 【P3056】【USACO12NOV】笨牛Clumsy Cows

    P3056 [USACO12NOV]笨牛Clumsy Cows 题目描述 Bessie the cow is trying to type a balanced string of parenthes ...

  3. Fitnesse批量读取变量信息，并保存到用例执行上下文中

    Fitnesse变量可以分成两种,一种是自定义变量,另一种是用例执行过程中的临时变量. 在Finesse使用过程中,如果需要定义一些公共的变量,可以统一在一个文件中使用自定义变量的方法,将公共变量全部 ...

  4. R语言基础画图/绘图/作图

    R语言基础画图/绘图/作图 R语言基础画图 R语言免费且开源,其强大和自由的画图功能,深受广大学生和可视化工作人员喜爱,这篇文章对如何使用R语言作基本的图形,如直方图,点图,饼状图以及箱线图进行简单介 ...

  5. 使用split_size优化的ODPS SQL的场景

    使用split_size优化的ODPS SQL的场景 首先有两个大背景需要说明如下:说明1:split_size,设定一个map的最大数据输入量,单位M,默认256M.用户可以通过控制这个变量,从而达 ...

  6. man命令及help命令

    一.man命令 man命令常用工具命令 man命令是Linux下的帮助指令,通过man指令可以查看Linux中的指令帮助.配置文件帮助和编程帮助等信息. 语法: man(选项)(参数) 选项: -a: ...

  7. 【JZOJ4805】【NOIP2016提高A组模拟9.28】跟踪

    题目描述 输入 输出 样例输入 4 2 1 3 1 2 2 3 3 4 样例输出 2 数据范围 解法 预处理出两个陌生人走到各个点的距离. 从石神处开始dfs,判断走到每一个点是否会被抓: 如果会,则 ...

  8. Android LruCache源码简介

    package android.util; import java.util.LinkedHashMap; import java.util.Map; /** * A cache that holds ...

  9. jmeter的关联-正则表达式的应用

    LoadRunnner中的关联为web_reg_save_param,查找左右边界,下次请求的时候会用到上次请求服务器返回的数据,那么我们把符合左右边界的数据保存下来,以便下次请求的时候用到. jme ...

  10. c++之手写strcmp

    int strcmp(const char* str1, const char*str2){ assert(str1 != NULL&&str2 != NULL); while (*s ...