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. Jmeter关联详解

    关联的概念 从上一步操作中获取需要的值,传递给下一步操作中进行引用,形成自动关联,而不是 每次操作都去手动修改关联的值.常见的场景有SessionID.Session Token值的获取. 正则表达式 ...

  2. 自学linux——3.编辑器vim的使用

    编辑器之神--vim 一.      vim的三种模式 1.命令模式(打开文件后默认模式) 不能直接对文件编辑,可以输入快捷键进行一些操作 2.编辑模式 对文件的内容进行编辑 3.末行模式(尾行模式) ...

  3. [.NET大牛之路 005] .NET 的执行模型

    .NET大牛之路 • 王亮@精致码农 • 2021.07.06 前面我们介绍 .NET 历史时讲过,微软基于 .NET Framework 重新设计并创造了跨平台的 .NET Core,目前已经发展到 ...

  4. Excel VBA活动抽奖小程序

    在活动中,我们常会有抽奖,抽奖箱准备繁琐,现在多采用线上抽奖方式,下面用Excel VBA写了一个简单的抽奖小程序 简单测试效果如下,可实现: 多次抽奖,且每次抽奖都不重复 抽奖界面滚动人员信息,点击 ...

  5. C# 为什么你应该更喜欢 is 关键字而不是 == 运算符

    前言 在C# 进行开发中,检查参数值是否为null大家都用什么?本文介绍除了传统的方式==运算符,还有一种可以商用is关键字. C# 7.0 中 is 关键字的使用 传统的方式是使用==运算符: if ...

  6. 5.1 剑指 Offer 03. 数组中重复的数字

    类型题:剑指 Offer 03. 数组中重复的数字 找出数组中重复的数字.在一个长度为 n 的数组 nums 里的所有数字都在 0-n-1 的范围内.数组中某些数字是重复的,但不知道有几个数字重复了, ...

  7. Linux进程间通信方式--信号，管道，消息队列，信号量，共享内存

    1.概述 通信方法 无法介于内核态与用户态的原因 管道(不包括命名管道) 局限于父子进程间的通信. 消息队列 在硬.软中断中无法无阻塞地接收数据. 信号量 无法介于内核态和用户态使用. 内存共享 需要 ...

  8. 给 Arm 生态添把火，腾讯 Kona JDK Arm 架构优化实践

    前言 Arm 架构以其兼具性能与功耗的特点,在智能终端以及嵌入式领域得到了广泛的使用,不断扩大其影响力.而在 PC 端以及数据中心,之前往往是 x86 架构在其中发挥着主要的作用.最近,随着人工智能. ...

  9. Shell-03-表达式和运算符

    表达式和运算符 条件表达式语句 [ 1 -eq 1 ] [[ 1 -eq 1 ]] test 1 -eq 1 等同于 [ 1 -eq 1 ] [root@satest_192-168-3-121 sh ...

  10. WPF在圆上画出刻度线

    思路 我们可以使用Ellipse先画出一个圆当背景,然后用Canvas再叠加画上刻度线,就能得到如下的效果 我们先用Ellipse画一个橙色的圆,然后将Canvas的宽度和高度绑定到Ellipse的宽 ...