<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>JQ动画</title>

    </head>

    <style>

        a{display: inline-block;background:#34daa2;border:1px solid #34daa2;padding:3px 15px;color: #fff;}

        .box{

            background: plum;

            padding:20px;

            color: #fff;

            width: 300px;

            display: none;

        }

        .span2{

            display: none;

        }

    </style>

    <body>

        <a href="#" onclick="boxClick()">点击<span class="span1">▶</span> <span class="span2">▼</span></a>

        <div class="box">

            一、JQ鼠标事件<br />

            1.click()事件；<br />

            2.dbclick事件；(表单验证、全选、反选)<br />

            3.focusin();获取焦点事件，可作用于父级<br />

            4.focusout();失去焦点事件，可作用于父级<br />

            5.mousedown();鼠标按下事件，和click有区别（鼠标按下就触发事件）<br />

            6.mouseup();鼠标抬起事件，和mousedown()事件结合起来就是click事件<br />

            7.mousemove()；鼠标移动事件<br />

            8.mouseover()；鼠标移入事件<br />

            9.mouseout()；鼠标移出事件<br />

            例：mouseover和mouseout可以写成链式写法：<br />

            $('p').mouseenter(function(){<br />

                $(this).css('color','pink')<br />

            }).mouseleave(function(){<br />

                $(this).css('color','blue')<br />

            })

        </div>

    </body>

</html>

<script src="https://cdn.bootcss.com/jquery/2.1.2/jquery.min.js"></script>

<script type="text/javascript">

    function boxClick(){

        if($('.box').is(':hidden')){

            $('.box').slideDown(500);

            $('.span2').show(500);

            $('.span1').hide(500);

        }else{

            $('.box').slideUp(500);

            $('.span2').hide(500);

            $('.span1').show(500);

        }

    }

</script>

JQ——利用一个开关，点击一个按钮完成展开收起功能的更多相关文章

  1. 当你输入一个网址/点击一个链接，发生了什么？（以www.baidu.com为例）

    >>>点击网址后,应用层的DNS协议会将网址解析为IP地址: DNS查找过程: 浏览器会检查缓存中有没有这个域名对应的解析过的IP地址,如果缓存中有,这个解析过程就将结束. 如果用户 ...

  2. 修改jq weui自定义对话框点击确定按钮不关闭对话框

    如果我们在对话框给用户输入值时,当用户输入空值点击确定按钮时,应该给个提示然后让用户继续输入. 如果在方法里使用 return false;,结果用户输入空值时对话框还是会关闭.正确做法如下: 先设置 ...

  3. JQuery------实现点击左右按钮，切换图片功能

    如图: 代码: html @*商品主图片*@ <div class="product-img" style="display:table-cell;width:40 ...

  4. Vue 实现点击展开收起

    Vue 展开收起功能实现 之前写项目的时候提到了一个需求 展开/收起 所有内容的需求 .因之前一值是重构,自己写功能还是比较少的,于是网上搜了一下,发现很多东西其实是jq的功能 虽然可以拿过来用,但是 ...

  5. PHP——0128练习相关2——js点击button按钮跳转到另一个新页面

    js点击button按钮跳转到另一个新页面 投稿:whsnow 字体:[增加 减小] 类型:转载 时间:2014-10-10我要评论 点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎么 ...

  6. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  7. 问题：asp.net 点击button按钮调到页面顶部；结果：asp.net点击一个按钮，使页面跳转到本面页上的指定位置

    asp.net点击一个按钮,使页面跳转到本面页上的指定位置 (2011-04-19 16:46:51) 转载▼ 标签: it   最近在做一个项目. 用到标题所说的功能. 实现方法: 1.在aspx中 ...

  8. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  9. 作用域通信对象：session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后，跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

随机推荐

  1. linux部署二：网卡配置和Yum源的替换

    一,初次登陆: 1.登陆(用root登陆)(1).账户名root(2).密码 ....2.工作界面切换A.Ctrl + alt + F1 : 图形化界面B.Ctrl + alt + F2----F6 ...

  2. 互联网安全中心(CIS)发布新版20大安全控制

    这些最佳实践最初由SANS研究所提出,名为“SANS关键控制”,是各类公司企业不可或缺的安全控制措施.通过采纳这些控制方法,公司企业可防止绝大部分的网络攻击. 有效网络防御的20条关键安全控制 对上一 ...

  3. Android ContenObserver 监听联系人数据变化

    一.知识介绍 1.ContentProvider是内容提供者 ContentResolver是内容解决者(对内容提供的数据进行操作) ContentObserver是内容观察者(观察内容提供者提供的数 ...

  4. linux下执行QT可执行文件报错

    老样子,不多BiBi,直接进入主题! 有时候在linux下编译好QT程序,用QTCreator运行没问题,打包移植到另一台机器上,用命令./XX执行就会报错:error while loading s ...

  5. pip install PIL The _imagingft C module is not installed

    需要先删除PIL再进行安装 sudo pip uninstall -y PIL 删除PIL相关文件夹:/usr/local/bin/pil , usr/lib/python2.7/dist-packa ...

  6. 【原】Java学习笔记009 - 阶段测试

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 1.需求:打印如下 ...

  7. 本地系统服务例程：Nt和Zw系列函数

    Windows本地操作系统服务API由一系列以Nt或Zw为前缀的函数实现的,这些函数以内核模式运行,内核驱动可以直接调用这些函数,而用户层程序只能通过系统进行调用.通常情况下用户层应用程序不会直接调用 ...

  8. 记录基于VMware虚拟机, Linux7.2下外部主机访问配置

    systemctl stop firewalld.service #停止firewall systemctl disable firewalld.service #禁止firewall开机启动

  9. Redis学习笔记（2）——Redis的下载安装部署

    一.下载Redis Redis的官网下载页上有各种各样的版本,如图 但是官网下载的Redis项目不正式支持Windows.如果需要再windows系统上部署,要去GitHub上下载.我下载的是Redi ...

  10. 为什么不建议在 HBase 中使用过多的列族

    我们知道,一张 HBase 表包含一个或多个列族.HBase 的官方文档中关于 HBase 表的列族的个数有两处描述: A typical schema has between 1 and 3 col ...