<!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. 36.QT-解决无边框界面拖动卡屏问题(附带源码)

    1.简介 看到很多才学QT的人都会问为啥无边框拖动为啥会花屏? 那是因为你每次拖动的过程中都一直在调用move()函数让QT重新绘制界面,如果资源过大,就会导致当前图形还未绘制完,便又重新改变坐标了, ...

  2. Android Stuido xml使用app属性没有提示代码

    解决方法: 打开file->invalidate Caches,之后build->rebuild project 2.重启Android Studio

  3. Python全栈开发之---装饰器

    1.装饰器的形成过程 import time def func1(): print('in func1') def timer(func): def inner(): start = time.tim ...

  4. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  5. 【代码笔记】Web-CSS-CSS 语法

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 设计模式系列之策略模式(Strategy Pattern)

    意图:定义一系列的算法,把它们一个个封装起来, 并且使它们可相互替换. 主要解决:在有多种算法相似的情况下,使用 if...else 所带来的复杂和难以维护. 何时使用:一个系统有许多许多类,而区分它 ...

  7. 电脑一键U盘启动快捷键

    下面是我特意列出的品牌电脑.笔记本电脑.组装电脑一键U盘启动快捷键对应列表,仅供大家查阅参考! [品牌-笔记本电脑] 笔记本品牌  启动按键 联想笔记本  F12 宏基笔记本  F12 华硕笔记本   ...

  8. 无法启动mysql服务”1067 进程意外终止”解决办法【简记】

    本文章主要是总结了各种导致mysql提示无法启动MYSQL服务”1067 进程意外终止”的一些解决办法,有碰到mysql无法启动的同学可尝试参考. 在win7的服务器里开启MySql服务提示“wind ...

  9. LeetCode算法题-Trim a Binary Search Tree（Java实现）

    这是悦乐书的第284次更新,第301篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第152题(顺位题号是669).给定二叉搜索树以及L和R的最低和最高边界,修剪树以使其所 ...

  10. 基于udp简单聊天的系统

    老师博客:http://www.cnblogs.com/Eva-J/articles/8244551.html#_label4 基于udp的简单的聊天代码 说明:这段代码,显示有client向serv ...