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

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

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>test</title>
  6.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
  7.     <style type="text/css">
  8.         *{
  9.             margin: 0;
  10.             padding: 0;
  11.         }
  12.         .left{
  13.             width: 200px;
  14.             text-align: center;
  15.             font-size: 20px;
  16.             font-family: 宋体;
  17.             padding-top: 10px;
  18.             padding-bottom: 10px;
  19.         }
  20.         .li1{
  21.             margin: 10px;
  22.         }
  23.         .li2{
  24.             padding-top: 5px;
  25.             padding-bottom: 5px;
  26.         }
  27.         ul{
  28.             list-style: none;
  29.             cursor: pointer;
  30.         }
  31.         h4{
  32.             background-color: #6495ED;
  33.         }
  34.         .ul2{
  35.             background-color: #FFF8DC;
  36.         }
  37.  
  38.     </style>
  39.  
  40. </head>
  41. <body>
  42.     <div class="left">
  43.         <ul class="ul1">
  44.  
  45.             <li class="li1">
  46.                 <h4 id="i1">人员管理</h4>
  47.                 <ul class="ul2" id="i2">
  48.                     <li class="li2">测试人员</li>
  49.                     <li class="li2">开发人员</li>
  50.                     <li class="li2">运维人员</li>
  51.                 </ul>
  52.             </li>
  53.  
  54.         </ul>
  55.     </div>
  56.  
  57.     <script>
  58.  
  59.             $("#i1").click(function(){
  60.                 $("#i2").slideToggle()
  61.             })
  62.  
  63.     </script>
  64.  
  65. </body>
  66. </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. 使用java AWT做一个增加按钮的简单菜单窗体

    package com.ysq.Swing; import java.awt.BorderLayout; import java.awt.Container; import java.awt.Flow ...

  2. Apache Unomi 远程表达式代码执行漏洞（CVE-2020-13942）

    影响版本: Apache Unomi < 1.5.2

  3. 【水】Dev-c++黑暗模式教程

    前言 大家有没有觉得盯着Dev-c++那个白花花的背景盯久了之后会觉得眼睛不舒服-- 本人今天就来给大家带来一个黑暗模式的Dev-c++,可以让眼睛没那么难受(本人亲测有效) 效果如下图(猛男警告): ...

  4. ElasticSearch入门检索

    前面简介说到 elsatic是通过RestFul API接口操作数据的,可以通过postman模拟接口请求测试一下 一._cat 1.GET /_cat/nodes:查看所有节点 2.GET /_ca ...

  5. Bugku-login1(SKCTF)(SQL约束攻击)

    原因 sql语句中insert和select对长度和空格的处理方式差异造成漏洞. select对参数后面的空格的处理方式是删除,insert只是取规定的最大长度的字符串. 逻辑 1.用 select ...

  6. Android程序员提加薪被拒，刷2000题跳槽涨薪50%！

    为什么想跳槽? 简单说一下当时的状况,我在这家公司做了两年多,这两年多完成了一个大项目,作为开发的核心主力,开发压力很大,特别是项目上线前的几个月是非常辛苦,几乎每晚都要加班到12点以后,周末最多只有 ...

  7. 1549页Android最新面试题含答案

    在今年年初的疫情中,成了失业人员之一,于是各种准备面试,发现面试题网上很多,但是都是很凌乱的,而且一个地方一点,没有一个系统的面试题库,有题库有的没有答案或者是答案很简洁,没有达到面试的要求.所以一直 ...

  8. （纯js）如何不刷新网页就能链接新的js文件

    如何不刷新网页就能链接新的js文件,其实在HTML语言中已经有相关的函数了,就是再添加一个<script src=.....></script>. 函数叫document.bo ...

  9. 使用脚本下载Gmail邮件附件

    以下脚本连接上我的Gmail帐号,将收件箱中2013年1月份的新语丝邮件的附件保存在当前目录的xys文件夹中. import imaplib import email import os dir_na ...

  10. mybatis源码核心代码

    /** * mybatis源码测试类 * @param args * @throws IOException * @see org.apache.ibatis.session.Configuratio ...