文章地址：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. 【模板】ST表 洛谷P1816 忠诚

    P1816 忠诚 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于 管家聪明能干,因而管家总是让财主十分满意.但是由于一些人的挑拨, ...

  2. web前端学习（三）css学习笔记部分（1）-- css入门基础知识+基本样式

    1.介绍及语法 1.1CSS概述: CSS指层叠样式表 CSS样式表极大地提高了工作效率 如果值大于一个单词,需要加上引号(意思是值只有一个的时候可以不加引号) 1.2CSS高级语法 1.选择器分组 ...

  3. TYVJ1340 送礼物

    P1340 送礼物 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后 ...

  4. 关于spring中<util:/>的配置

    解决redis设置缓存时间找到的帖子,我这个初学者需要学习的还是很多的. 原文地址:http://www.doc100.net/bugs/t/216322/index.html 探索<util/ ...

  5. homework-//2017-12-27 11:11 星期三

    //2017-12-27 11:11 星期三 const WEEKMAP = { 0:"sunday", 1:"monday", 2:"tuesday ...

  6. js中的replace问题和textarea回车符问题

    在textarea中输入回车符 在js读取textarea中的值有\r\n然后到业务层转换到string中就有可能变成空格形式然后被存入数据库,当在取出此值的时候则会变成空格的形式,因此我们需要将不显 ...

  7. 外贸电子商务网站之Prestashop paypal支付添加

    1.在https://addons.prestashop.com/en/payment-card-wallet/1748-paypal.html 下载paypal支付模块 2.解压,复制到网站根目录- ...

  8. JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本框全部字体标红

    腾讯2014年研发职位笔试题Web前端方向简单题第一题. 代码: <html> <head> <title>test JavaScript</title> ...

  9. Best Time to Sell and Buy Stock

    这道题想了很多,但是想多了.这个题思路很简单,如果当前值大于最小值,就计算差,和最大利润值比较. class Solution { public: int maxProfit(vector<in ...

  10. Person Re-identification 系列论文笔记（四）：Re-ID done right: towards good practices for person re-identification

    Re-ID done right: towards good practices for person re-identification Almazan J, Gajic B, Murray N, ...