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是元素的属性,但是它自身则是一个对象, ...
随机推荐
- joomla 3.7.0 (CVE-2017-8917) SQL注入漏洞
影响版本: 3.7.0 poc http://192.168.49.2:8080/index.php?option=com_fields&view=fields&layout=moda ...
- WPF Combox实现下拉多选,可选中多个值
自定义多选MultiCombox,可以实现下拉列表多选 using System; using System.Collections.Generic; using System.Collections ...
- Java异常02——自定义异常
Error与Exception与自定义异常 Error与Exception Error Exception 自定义异常 快捷键: ctrl + alt + t package exception.d ...
- 在CentOS7下的OpenStack中配置使用Spice协议
在CentOS7下的OpenStack中配置使用Spice协议 by 无若 1. 需要的包 在计算节点上 #yum install spice-html5 注意:使用yum安装spice-ht ...
- 删除EFI系统分区(ESP)后Windows无法启动,重建引导分区并修复启动的过程
@ 目录 一.开机故障描述 二.工具: 三.什么是EFI系统分区 四.如何查看EFI系统分区 五.删除后如何重建系统分区 1.建立未分配空间 2.建立ESP分区 3.按下图,ESP分区的大小200M即 ...
- MySQL全面瓦解27:主从复制(原理 + 实践)
概念 主从复制,是指建立一个和主数据库完全一样的数据库环境(称为从数据库),并将主库的操作行为进行复制的过程:将主数据库的DDL和DML的操作日志同步到从数据库上, 然后在从数据库上对这些日志进行重新 ...
- ECDSA—模加减模块
如果a,b GF(P),则加法运算a+b=r (mod p),其中r满足0<r<p-1,即a+b除以p的余数,该操作成为模p加法.对于模减运算可以视为另类的模加运算,即a+(-b)=k ( ...
- [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现
[源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现 目录 [源码解析] 深度学习流水线并行Gpipe(1)---流水线基本实现 0x00 摘要 0x01 概述 1.1 什么是GPip ...
- 题解 God Knows
传送门 这里有个线段树维护单调栈的神仙技巧 同机房dalao @Yubai的不同理解方式 yysy,我考场上连\(n^2\)的暴力都没搞出来 这里实际上求的是最小权极大上升子序列 但这个跟题目几乎没什 ...
- redis的过期策略和淘汰策略
过期键删除策略 1.定时删除:在设置键的过期时间的同时,创建一个定时器timer,让定时器在键过期时间来临时,立即执行对键的删除操作. 2.惰性删除:放任键过期不管,但是每次从键空间中获取键时,都检查 ...