文章地址：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. 百分比宽度并排元素浮动之后,设置margin,padding换行的问题

    今天遇到一个问题, 如下图,右边的div加了内边距换行: 解决方法: box-sizing: border-box;

  2. linux常用目录介绍

    bin:全称binary,含义是二进制,该目录中存放的都是一些二进制文件,这些文件都是可以被运行的. dev:该目录主要存放的是外接设备,例如:光盘等.注意:在其中的设备是不能被直接使用的,需要挂载( ...

  3. 从零起步 系统入门Python爬虫工程师

    从零起步 系统入门Python爬虫工程师 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的 ...

  4. at: 安排一个任务在未来执行，需要一个atd的系统后台进程

    检查atd进程是否启动 [root@centos61 桌面]# service atd status atd (pid  2274) 正在运行... [root@centos61 桌面]# chkco ...

  5. 打印begin~end

    要求: 输入:begin和end 输出:依次打印出begin到end import java.util.Scanner; //递归打印begin —— end public class demo1 { ...

  6. 阿里云SaaS生态战略发布，用宜搭5分钟部署OCR文字识别

    7月26日,在阿里云合作伙伴峰会上,阿里云发布SaaS生态战略:通过SaaS加速器为合作伙伴提供应用开发.集成.上云.售卖的全链路解决方案,提升开发效率和集成效率,缩短商业化周期. 作为阿里SaaS加 ...

  7. BootstrapValidation一些tips

    BootstrapValidation一些tips:1. callback的用法 如果你有一些特别的检查需要,比如两个元素必需有一个有值,你可以在两个元素上加上callback,例:sel和cb必需有 ...

  8. 深入浅出Cocoa之消息（二）-详解动态方法决议(Dynamic Method Resolution) 【转】

    序言 如果我们在 Objective C 中向一个对象发送它无法处理的消息,会出现什么情况呢?根据前文<深入浅出Cocoa之消息>的介绍,我们知道发送消息是通过 objc_send(id, ...

  9. DTcms iis6 伪静态 iis配置方法 【图解】

    1.右键点击 要设置网站的网站 2.属性 ——>主目录 ——>配置——> 3.如右侧窗口,找到 .aspx 扩展名——>编辑——>复制 可执行文件的路径——>关闭 ...

  10. react-jd-index

    看见一些代码的产物,会觉得非常的漂亮~感谢无私开源的程序员们~你们是最可爱的人儿~~ //index.jsx require('./app/lib/common.css'); import React ...