slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

例子：一个简单的下拉菜单效果---->

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>test</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        .left{

            width: 200px;

            text-align: center;

            font-size: 20px;

            font-family: 宋体;

            padding-top: 10px;

            padding-bottom: 10px;

        }

        .li1{

            margin: 10px;

        }

        .li2{

            padding-top: 5px;

            padding-bottom: 5px;

        }

        ul{

            list-style: none;

            cursor: pointer;

        }

        h4{

            background-color: #6495ED;

        }

        .ul2{

            background-color: #FFF8DC;

        }

    </style>

</head>

<body>

    <div class="left">

        <ul class="ul1">

            <li class="li1">

                <h4 id="i1">人员管理</h4>

                <ul class="ul2" id="i2">

                    <li class="li2">测试人员</li>

                    <li class="li2">开发人员</li>

                    <li class="li2">运维人员</li>

                </ul>

            </li>

        </ul>

    </div>

    <script>

            $("#i1").click(function(){

                $("#i2").slideToggle()

            })

    </script>

</body>

</html>

jq的slideToggle效果的更多相关文章

  1. 修改css样式+jq中的效果+属性操作+元素操作

    :checked    选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color ');   //300px 2.参数是属性名,属性值,逗号分隔,是 ...

  2. JQ实现弹幕效果

    JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...

  3. 今天讲的是JQ 的动画效果

    老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  4. Table中采用JQuery slideToggle效果的问题

    需求:用JQuery实现,点击最上边的粗加号时,对所有含有子表的Tr进行展开,点击 + 号时,只对当前Tr的下一个tr内容的动态隐藏和显示: 问题:JQuery的slideToggle() slide ...

  5. jq菜单折叠效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. [锋利的JQ]-超链接提示效果

    关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...

  7. jQ模拟打字效果插件typetype

    typetype是一个jquery插件,可以模拟人类的打字效果. 效果图如下所示: 查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type. ...

  8. jq跑马灯效果

    这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...

  9. [锋利JQ]-图片提示效果

    新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...

随机推荐

  1. 剖析虚幻渲染体系（08）- Shader体系

    目录 8.1 本篇概述 8.2 Shader基础 8.2.1 FShader 8.2.2 Shader Parameter 8.2.3 Uniform Buffer 8.2.4 Vertex Fact ...

  2. 大数据学习（07）——Hadoop3.3高可用环境搭建

    前面用了五篇文章来介绍Hadoop的相关模块,理论学完还得操作一把才能加深理解.这一篇我会花相当长的时间从环境搭建开始,到怎么在使用Hadoop,逐步介绍Hadoop的使用. 本篇分这么几段内容: 规 ...

  3. 如何从二维平面n个点中寻找距离最近两个点？

    如何理解分治算法 什么是分治算法?简单来说就是"分而治之",也就是将原问题划分成n个规模较小的,并且结构与原问题相似的子问题,然后去递归地解决这些子问题,最后再合并其结果,就得到原 ...

  4. insert()与substr()函数

    insert()函数与substr()函数 insert()函数: insert ( pos, str2);--将字符串str2插入到原字符串下标为pos的字符前 insert (pos, n, c) ...

  5. SpringBoot 如何进行参数校验，老鸟们都这么玩的！

    大家好,我是飘渺. 前几天写了一篇 SpringBoot如何统一后端返回格式?老鸟们都是这样玩的! 阅读效果还不错,而且被很多号主都转载过,今天我们继续第二篇,来聊聊在SprinBoot中如何集成参数 ...

  6. [C++]-unordered_map 映射

    unordered_map和map的区别请点击这里. 本文中的代码跟[C++]-map 映射中的代码仅仅是把定义的map类型数据定义成了unordered_map类型数据. 代码 #include&l ...

  7. Notes about WindowPadX

    WindowPadX乃一Autohotkey脚本,具有强大的单/多显示器窗口排布能力且易于配置.有了它,那些Pro版收费的.需要安装的DisplayFusion, MultiMon TaskBar, ...

  8. 【笔记】求数据前n个主成分以及对高维数据映射为低维数据

    求数据前n个主成分并进行高维数据映射为低维数据的操作 求数据前n个主成分 先前的将多个样本映射到一个轴上以求使其降维的操作,其中的样本点本身是二维的样本点,将其映射到新的轴上以后,还不是一维的数据,对 ...

  9. 构建工具之Maven的使用(一)

    一.前言 对于开发一个Java项目,上线之前会通过编译,测试,打包,部署这几个构建过程,如果文件较少,我们可以使用java-->javac-->jar这些命令去完成上述的构建流程.但是当工 ...

  10. jpa中遇到关键字

    @Column(name = "`rank`") 或者 @Column(name = "\"use\"")