先贴代码,再讲详细事件

<!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 的点击事件的更多相关文章

  1. ThinkPHP框架下,给jq动态添加的标签添加点击事件移除标签

    jq移除标签主要就是$("#要移除的id").remove();不再赘述,这里要提醒的是jq中动态添加标签后怎样添加点击事件.一般的jq添加点击事件是用这种方法$("#i ...

  2. 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设计 的宗旨是“ ...

  3. 微信小程序之实现slideUp和slideDown效果和点击空白隐藏

    怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...

  4. jquery的slideUp、slideDown、slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug

    jquery的slideUp.slideDown.slideToggle等涉及滑动效果的一系列函数,在IE浏览器下有几处bug: 1. 因position引起的问题 影响:IE全系列 症状:在需要sl ...

  5. css3实现jQuery的slideUp和slideDown效果

    最近打算做一些交互优化方面的轮子.虽然轮子别人都弄过,但是自己没弄过.重复造轮子对知识理解还是有好处的.本次轮子如题目.直接代码. <!DOCTYPE html> <html lan ...

  6. css3模拟jq点击事件

    还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...

  7. jq点击事件不生效,效果只闪现一次又立马消失的原因?

    出现的问题:jq点击事件不生效,点击的时候效果实现但又立马消失,页面重新刷新了一次 可能出现的原因: a标签href属性的原因,虽然点击事件生效,但页面又刷新了一次,所以没有效果,只闪了一次 解决方案 ...

  8. jq点击事件未生效

    jq点击事件未生效,应写成事件委托的方式 // $(function(){ // $('.current a').on("click", function(){ // $(this ...

  9. 通过js或jq增加的代码,点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

随机推荐

  1. macOS 安装 pip

    安装好wget之后: wget https://bootstrap.pypa.io/get-pip.py sudo python get-pip.py 终于可以愉快的pip了~

  2. SSD硬盘的4K对齐

    4K对应4096 硬盘模式: 一.让SSD运行在AHCI模式下: AHCI,全称Advanced Host Controller Interface,即高级主机控制器接口,相比老旧的“IDE“ 虚拟模 ...

  3. JSP_通过表格显示数据库的信息

    在本篇文章中,小编将介绍在jsp页面中通过表格显示数据库的实现:下面我们以“新闻发布系统”中显示一级标题的信息为例进行讲述,在新闻发布系统中存在一二级标题,在后台可以对标题进行管理,可查询标题等信息 ...

  4. xudyh的gcd模板

    hdu 5019 #include <cstdlib> #include <cctype> #include <cstring> #include <cstd ...

  5. bzoj4419[SHOI2013]发微博

    题意:给你一个初始没有边,点权均为0的无向图,三种操作:加边,删边,选择一个点将当前与之相邻的点(不包括自身)的点权+1,询问最后所有点的点权. 据说正解是set维护每个人的朋友,然后考虑每次加边.删 ...

  6. AngularJs angular.Module模块接口配置

    angular.Module Angular模块配置接口. 方法: provider(name,providerType); name:服务名称. providerType:创建一个服务的实例的构造函 ...

  7. Python 培训之正则表达式

    re 模块 re.math 从头匹配 re.search 结构: re.math(r'^c',a)   不符合返回None 原字符: . 任意字符 [ ] 或者 [A-Z,a-z,b] \d 数字 \ ...

  8. BPEL 实例教程

    http://www.oracle.com/technetwork/cn/articles/matjaz-bpel1-090722-zhs.html BPEL 实例教程 作者:Matjaz Juric ...

  9. 问题导向VS目标导向:领导者要倾向哪种?

    人类进步的驱动: 问题驱动:目标驱动: 两者相互影响: 问题驱动是起点,并且在很多杂乱的问题中只有少数可以转化为目标,从而成为进步的动力:多数问题只是以干扰的形式出现. 问题驱动是被动的,并且常常干扰 ...

  10. WinForm------给GridControl添加搜索功能

    //按钮点击事件 private void Btn_Search_Click(object sender, EventArgs e) { //获取编辑框的值 string text = this.te ...