<!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. Java开发笔记（二十三）数组工具Arrays

    数组作为一种组合形式的数据类型,必然要求提供一些处理数组的简便办法,包括数组比较.数组复制.数组排序等等.为此Java专门设计了Arrays工具,该工具包含了几个常用方法,方便程序员对数组进行加工操作 ...

  2. Mongo基础 索引的使用

    MongoDB中的索引和其他数据库索引类似,也是使用B-Tree结构.mongodb的索引是在collection级别上的,并且支持在任何列或者集合内的文档的子列中创建索引. 所有的MongoDB集合 ...

  3. 视频拉流 Linux安装FFmpeg

    1 下载最新源码包并解压 $ wget http://ffmpeg.org/releases/ffmpeg-3.1.3.tar.bz2 $ tar jxvf ffmpeg-.tar.bz2 2安装ya ...

  4. 前端入门12-JavaScript语法之函数

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  5. Web前端：博客美化：一、模板美化

    1.选用模板simplememory 2.写css放在 这些会覆盖掉原来的css样式 我是在网上找的css代码二次加工的 : ) /*1.针对simplememory的修改*/ #google_ad_ ...

  6. Spring boot入门（一）：快速搭建Spring boot项目

    (一)Spring boot介绍 本部分摘自:https://www.zhihu.com/question/64671972/answer/223383505 Spring Boot是由Pivotal ...

  7. 【Dojo 1.x】笔记7 配置对象dojoConfig的内容1：has属性、加载器的属性

    说完了出身,即出身自dojo/_base/目录下的config模块,那就要好好讲讲这对象有什么可以写的属性了. 1. has属性 官方说是用于更好的特征检测的,具体有什么用现在还不得知. 例如: &l ...

  8. selenium chrome在新标签页打开链接的方法

    目前chrome是我在实现webdriver时运行最稳定的浏览器,如何利用webdriver打开多个标签页和链接呢,到处查找得到的往往只是如何打开标签页.打开标签页很简单,chrome浏览器打开标签页 ...

  9. vmware 开启VM的硬件cpu虚拟化功能

    物理机的cpu硬件虚拟化功能,通过开启bios中的设置,而vmware中创建的虚拟机也可以开启该特性,如下. 这样的话,就直接可以基于这些VM安装openstack计算节点.控制节点.网络节点了.

  10. js计算剩余分钟

    // 剩余时间提醒 function checkTime() { if (timeCompare()) { document.getElementById('distanceDeadline').in ...