jQuery 使用slideToggle()滑动显示隐藏

slideToggle（）

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

案例展示：

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><meta charset="utf-8" /><style>div {width: 200px;margin: auto;}.HP_JQuery {background-color: #ff0000;}.txt_content {background-color: #00ffff;}</style><script src="../Scripts/jquery-1.11.3.js"></script><script>$(function () {//点击标题 显示与隐藏 文本内容$("#cool .HP_JQuery").click(function () {//用600毫秒缓慢的将段落滑上或滑下$(".txt_content").slideToggle("slow");});});</script>
</head>
<body><div id="cool"><h4 class="HP_JQuery">什么是JQuery？</h4><div class="txt_content">jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</div></div>
</body>
</html>

效果图：

点击“什么是JQuery？” 现实与隐藏内容

jQuery 使用slideToggle()滑动显示隐藏相关推荐

jQuery的几种显示隐藏方法
jQuery显示隐藏方法 hide()方法元素隐藏,隐藏的前提必须是元素display:block: show()方法元素显示,显示的前提必须是元素display:none; toggle()方法 ...
jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
1.效果及功能说明 hover事件制作产品图片鼠标滑过图片半透明,标题文字从左到右滑动动画移动显示隐藏 2.实现原理首先把效果都隐藏,然后定义一个伪类来触发所有的效果,接下来当触发伪类后会有一个遍历 ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
javascript和jquery实现页面元素显示/隐藏切换的方法
一.javascript实现方法一: document.getElementById("idname").style.visibility="hidden"; ...
jQuery 入门教程(5): 显示/隐藏内容
2019独角兽企业重金招聘Python工程师标准>>> jQuery的hide()和show()可以用来显示和隐藏内容.比如下面的例子:jQuery的hide()和show() 可以 ...
jquery根据滚动像素显示隐藏顶部导航条
本文使用jquery的scrollTop方法监视页面垂直滚动像素,并根据像素隐藏或者显示顶部的导航条. 效果预览网址:http://www.keleyi.com/keleyi/phtml/scroll ...
动态控制jQuery easyui datagrid工具栏显示隐藏
//隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分隔线 $('div.datagrid-toolbar div').eq(0).h ...
jquery关于多个显示隐藏
今天做了一个关于多个栏目的隐藏与显示,内容为初始化显示6个栏目,点击按钮显示所有的栏目,在次点击隐藏出现的栏目 <div class="ftlt_z_navigation acer&q ...
手机端zepto.js点击滑动显示隐藏
var btn1 = $('.wtw-btn1') //弹框一function box1(value1,value2){let str = '<div class="wtw-pop w ...

jQuery 使用slideToggle()滑动显示隐藏

jQuery 使用slideToggle()滑动显示隐藏相关推荐

最新文章

热门文章