今天是JQ 的slideUp 和 slideDown 的点击事件
先贴代码,再讲详细事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.js"></script>
</head> <style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style> <body> <div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School,你可以找到你所需要的所有网站建设教程。</p>
</div> <p class="flip">请点击这里</p> <script type="text/javascript"> $(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp();
});
});
</script> </body>
</html>
重点(Tips):
1、click 事件 按钮的选择
在这个断码中是 “.flip”
2、节点的选择
在这段代码中是 “.panel”
再贴一段代码
<script type="text/javascript"> $(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle();
});
});
</script>
.slideToggle 事件
将这个滑动效果进行了 Up 和 Down 的2中效果 都展示出来
今天就到这里
今天是JQ 的slideUp 和 slideDown 的点击事件的更多相关文章
- ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签
jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...
- java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)
1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...
- 微信小程序之实现slideUp和slideDown效果和点击空白隐藏
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...
- jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug
jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...
- css3实现jQuery的slideUp和slideDown效果
最近打算做一些交互优化方面的轮子.虽然轮子别人都弄过,但是自己没弄过.重复造轮子对知识理解还是有好处的.本次轮子如题目.直接代码. <!DOCTYPE html> <html lan ...
- css3模拟jq点击事件
还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
- jq点击事件不生效,效果只闪现一次又立马消失的原因?
出现的问题:jq点击事件不生效,点击的时候效果实现但又立马消失,页面重新刷新了一次 可能出现的原因: a标签href属性的原因,虽然点击事件生效,但页面又刷新了一次,所以没有效果,只闪了一次 解决方案 ...
- jq点击事件未生效
jq点击事件未生效,应写成事件委托的方式 // $(function(){ // $('.current a').on("click", function(){ // $(this ...
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
随机推荐
- macOS 安装 pip
安装好wget之后: wget https://bootstrap.pypa.io/get-pip.py sudo python get-pip.py 终于可以愉快的pip了~
- SSD硬盘的4K对齐
4K对应4096 硬盘模式: 一.让SSD运行在AHCI模式下: AHCI,全称Advanced Host Controller Interface,即高级主机控制器接口,相比老旧的“IDE“ 虚拟模 ...
- JSP_通过表格显示数据库的信息
在本篇文章中,小编将介绍在jsp页面中通过表格显示数据库的实现:下面我们以“新闻发布系统”中显示一级标题的信息为例进行讲述,在新闻发布系统中存在一二级标题,在后台可以对标题进行管理,可查询标题等信息 ...
- xudyh的gcd模板
hdu 5019 #include <cstdlib> #include <cctype> #include <cstring> #include <cstd ...
- bzoj4419[SHOI2013]发微博
题意:给你一个初始没有边,点权均为0的无向图,三种操作:加边,删边,选择一个点将当前与之相邻的点(不包括自身)的点权+1,询问最后所有点的点权. 据说正解是set维护每个人的朋友,然后考虑每次加边.删 ...
- AngularJs angular.Module模块接口配置
angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...
- Python 培训之正则表达式
re 模块 re.math 从头匹配 re.search 结构: re.math(r'^c',a) 不符合返回None 原字符: . 任意字符 [ ] 或者 [A-Z,a-z,b] \d 数字 \ ...
- BPEL 实例教程
http://www.oracle.com/technetwork/cn/articles/matjaz-bpel1-090722-zhs.html BPEL 实例教程 作者:Matjaz Juric ...
- 问题导向VS目标导向:领导者要倾向哪种?
人类进步的驱动: 问题驱动:目标驱动: 两者相互影响: 问题驱动是起点,并且在很多杂乱的问题中只有少数可以转化为目标,从而成为进步的动力:多数问题只是以干扰的形式出现. 问题驱动是被动的,并且常常干扰 ...
- WinForm------给GridControl添加搜索功能
//按钮点击事件 private void Btn_Search_Click(object sender, EventArgs e) { //获取编辑框的值 string text = this.te ...