jq的slideToggle效果
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效果的更多相关文章
- 修改css样式+jq中的效果+属性操作+元素操作
:checked 选框选中的 一.修改css样式: 1.参数只写属性名,则返回属性值 $(this).css( ' color '); //300px 2.参数是属性名,属性值,逗号分隔,是 ...
- JQ实现弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...
- 今天讲的是JQ 的动画效果
老规矩,先贴代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Table中采用JQuery slideToggle效果的问题
需求:用JQuery实现,点击最上边的粗加号时,对所有含有子表的Tr进行展开,点击 + 号时,只对当前Tr的下一个tr内容的动态隐藏和显示: 问题:JQuery的slideToggle() slide ...
- jq菜单折叠效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- [锋利的JQ]-超链接提示效果
关键知识点: 1.事件对象:当事件一旦被触发,事件对象便会创立.事件对象只能作用于该事件的事件处理程序. 2.认识了mousemove事件了连续触发执行的特性. 代码: HTML: <div c ...
- jQ模拟打字效果插件typetype
typetype是一个jquery插件,可以模拟人类的打字效果. 效果图如下所示: 查看演示 http://weber.pub/demo/160828/jQuery.Type/jQuery.type. ...
- jq跑马灯效果
这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其 ...
- [锋利JQ]-图片提示效果
新知识点: 在HTML-Dom中 "style" 属性,是所有HTML标签共有的一个对象属性,这个对象属性可以为元素设置内嵌样式. style是元素的属性,但是它自身则是一个对象, ...
随机推荐
- Azure安装完postgresql遇到:psql: error: could not connect to server: FATAL: no pg_hba.conf entry for host
进入创建好的Azure Database for PostgreSQL server 点击connection security 在Firewall rules中 Add 0.0.0.0-255.2 ...
- TypeScript学习笔记(三)泛型、模块化和命名空间
目录 一.泛型 1. 泛型函数 2. 泛型类 3. 泛型接口 写法一 写法二 两种写法的区别 二.模块化 1. export写法一 2. export写法二 3. 为引入的方法或变量起别名 4. ex ...
- .NET 6 预览版 7 发布——最后一个预览版
原文:bit.ly/2VJxjxQ 作者:Richard 翻译:精致码农-王亮 说明:文中有大量的超链接,这些链接在公众号文章中被自动剔除,一部分包含超链接列表的小段落被我删减了,如果你对此感兴趣,请 ...
- 如何看待Android开发的“前景和内卷”
我们首先来意淫一波 5G时代Android即将崛起,Android将与物联网强强联合,配合上5G信息高速传递的模式,再搭配物联网号召的"万物互通"的旗号,同时各位Android开发 ...
- 6.算法竞赛中的常用JAVA API :Math类(转载)
6.算法竞赛中的常用JAVA API :Math类 求最值 最小值 Math.min(int a, int b) Math.min(float a, float b) Math.min(double ...
- Greenplum 6安装指南(CentOS 7.X)
一.基本概念 Greenplum是一个面向数据仓库应用的关系型数据库,因为有良好的体系结构,所以 在数据存储.高并发.高可用.线性扩展.反应速度.易用性和性价比等方面有非常 明显的优势.Greenpl ...
- 数据结构与算法-排序(七)希尔排序(Shell Sort)
摘要 看希尔排序需要先想象出一个二维的矩阵,在这个矩阵中,有多少列数据全看步长(一定的规则得到).处理完之后,就再接着用另一个步长组成矩阵处理.直到步长全部使用完. 这里的巧妙之处就是没有把序列先处理 ...
- unserialize反序列化 安鸾 Writeup
关于php反序列化漏洞原理什么,可以看看前辈的文章: https://xz.aliyun.com/t/3674 https://chybeta.github.io/2017/06/17/浅谈php反序 ...
- 【网络编程】TCPIP-5-UDP
目录 前言 5. UDP 网络编程 5.1 UDP 的工作原理 5.2 UDP 的高效性 5.3 实现 UDP 服务端/客户端 5.3.1 概念 5.3.2 UDP 的数据 I/O 函数 5.3.3 ...
- docker部署elasticsearch-+-Kibana(6-8)-+-SpringBoot-2-1-6
elasticsearch快速开始 docker run -d --name elasticsearch --net somenetwork -p 9200:9200 -p 9300:9300 -e ...