文章地址：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. SQL Sever实验一 创建和删除数据库数据表

    一． 实验目的 1． 熟悉SQL    Server    2008    中SQL    Server    Management    Studio的环境 2． 了解SQL    Server   ...

  2. Leetcode641.Design Circular Deque设计循环双端队列

    设计实现双端队列. 你的实现需要支持以下操作: MyCircularDeque(k):构造函数,双端队列的大小为k. insertFront():将一个元素添加到双端队列头部. 如果操作成功返回 tr ...

  3. 初探iview

    我的js功力还是TCL,太差了~ 运行iview官网例子还有它的工程文件都运行不出来.我非常感谢那些无私开源的博主,它们无私分享自己的技术,让我学到了很多东西. iview是vue的一个UI框架之一, ...

  4. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  5. selenium 常见问题之 nknown error: call function result missing ‘value’

    运行时候出现错误提示如下: 出现该问题原因:chrome浏览器自动升级.导致和chromedriver支持的版本不匹配. 解决方案有两种(本人采用的是第一种方式解决办法.): 1.下载和当前使用的ch ...

  6. HDU 1724 自适应辛普森法

    //很裸的积分题,直接上模板 #include<stdio.h> #include<math.h> int aa, bb; //函数 double F(double x){ - ...

  7. Java项目压力测试（待补）

    JVM监控使用ava自带jvisualvm,在java安装目录jdk1.*/bin下(有很多更高级的东西 线程2000以下,太多切换太消耗.CPU使用率30%以下,更健壮

  8. 【python小随笔】celery周期任务（简单原理）

    1:目录结构 |--celery_task |--celery.py # 执行任务的main函数 |--task_one # 第一个任务 |--task_two # 第2个任务 . . . . |-- ...

  9. Django 自定义auth_user

    1 导入AbstractUser from django.contrib.auth.models import AbstractUser 1 2 创建类UserProfile并继承AbstractUs ...

  10. 洛谷P1929 迷之阶梯

    P1929 迷之阶梯 题目描述 在经过地球防卫小队的数学家连续多日的工作后,外星人发的密码终于得以破解.它 告诉我们在地球某一处的古老遗迹中,存在有对抗这次灾难的秘密武器.防卫小队立即赶 到这处遗迹. ...