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. Couchdb 垂直权限绕过漏洞（CVE-2017-12635）

    影响版本:小于 1.7.0 以及 小于 2.1.1 首先,发送如下数据包: 修改数据包 { "type": "user", "name": ...

  2. Mysql命令语句

    常用的管理命令 SHOW DATABASES;    //显示当前服务器下所有的数据库 USE 数据库名称;          //进入指定的数据 show tables;              ...

  3. 浅谈MySQL与mongodb的区别

    讨论MySQL与mongodb使用上的区别以及可能适用的应用场景,不深入到数据库的实现细节方面.鉴于个人水平有限,文章可能存在错误之处,希望各位指正. 代码编写 mongodb支持reactor,可以 ...

  4. Java面向对象14——接口

    接口  package oop.demon01.demon09; ​ //抽象思维~Java ​ //interface 定义的关键字 , 接口都需要有实现类 public interface Use ...

  5. 大厂需要什么样的 Android 开发？

    前言 昨天和一个百度的朋友闲聊,他说根据最近招聘 Android工程师的经验来看,大部分候选人在工作 3 年的时候基本都会遇上一道难过的坎. 为啥这么说呢? 因为工作一段时间之后,大部分工程师都已经完 ...

  6. 谈谈网络协议 - 数据链路层（ Data Link）

    数据链路层( Data Link) 链路:从1个节点到相邻节点的一段物理线路(有线或无线),中间没有其他交换节点 案例 上图可以看出,总共由5条链路组成: 第1条:计算机0 => 路由器0,使用 ...

  7. IOC（概念和原理）

    什么是 IOC (1)控制反转,把对象创建和对象之间的调用过程,交给 Spring 进行管理 (2)使用 IOC 目的:为了耦合度降低 (3)做入门案例就是 IOC 实现 IOC 底层原理 xml 解 ...

  8. ABP框架使用Oracle数据库，并实现从SQLServer中进行数据迁移的处理

    ABP框架的数据访问底层是基于EFCore(Entity Framework Core)的,是微软标志性且成熟的ORM,因此它本身是支持多种主流数据库MySQL,SqlServer,Oracle,SQ ...

  9. 拦截器HandlerInterceptorAdapter的postHandle和afterCompletion无法获取response返回值问题

    缘起 有一个需求,在进入controller之前验证调用次数是否超过限制,在响应之后判断是否正常返回,对调用次数进行+1,发现带@RestController的类和带@ResponseBody的方法在 ...

  10. docker-01

    Docker介绍 1 什么是容器? Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从 Apache2.0 协议开源 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移 ...