jq-toggle:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>toggle<!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="UTF-8">
  9. <title>toggle</title>
  10. <style>
  11. * {
  12. margin: 0;
  13. padding: 0;
  14. }
  15. button {
  16. font-size: 18px;
  17. padding: 0 19px;
  18. }
  19. #con {
  20. width: 500px;
  21. background: #ccc;
  22. color: red;
  23. font-size: 18px;
  24. overflow: hidden;
  25. }
  26. </style>
  27. <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
  28. </head>
  29. <body>
  30. <button id="zk">展开</button>
  31. <button id="sq">收起</button>
  32. <div id="con">
  33. 展开收起动画效果
  34. 展开收起动画效果
  35. 展开收起动画效果
  36. 展开收起动画效果
  37. 展开收起动画效果
  38. 展开收起动画效果
  39. 展开收起动画效果
  40. 展开收起动画效果
  41. 展开收起动画效果
  42. 展开收起动画效果
  43. 展开收起动画效果
  44. 展开收起动画效果
  45. 展开收起动画效果
  46. 展开收起动画效果
  47. 展开收起动画效果
  48. 展开收起动画效果
  49. 展开收起动画效果
  50. 展开收起动画效果
  51. </div>
  52. <script type="text/javascript">
  53. $('#sq').click(function() {
  54. // $('#con').toggle();
  55. $('#con').toggle(3000);
  56. });
  57. </script>
  58. </body>
  59. </html>
  60. </title>
  61. </head>
  62. <body>
  63. </body>
  64. </html>

  

jq-toggle的更多相关文章

  1. 关于JQ toggle 的注意事项

    1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.

  2. Jquery 使用小结

    JQuery API中文档地址:http://www.hemin.cn/jq/index.html JQuery 中文社区:http://www.jquery.org.cn/ 1.siblings() ...

  3. Java Web-JQuery学习

    Java Web-JQuery学习 JQuery概念 是一个JS框架,可以用来简化JS的开发,设计宗旨是"write less,do more",即写更少的代码,做更多的事情.它封 ...

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

  5. 【JQ】toggle / slideToggle / fadeToggle 的区别

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQ的toggle()方法示例

    定义和用法toggle() 方法切换元素的可见状态.如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素. 语法$(selector).toggle(speed,callback,swi ...

  7. jq 切换功能toggle

    ---恢复内容开始--- $(document).ready(function () { $(".jianjie").click(function () { $(this).tog ...

  8. JQ 使用toggle实现DIV的隐藏和显示

    $('.submenuA').toggle( function () { $(this).next('div').show(); }, function () { $(this).next('div' ...

  9. jQ的toggle() 方法

    语法:$(selector).toggle(speed,callback,switch) 实例: <script src="js/jquery.min.js">< ...

  10. jquery的show/hide/toggle详解

    通过阅读源码我们发现show,hide,toggle调用了showHide和isHidden这2个方法,所以我们要搞明白原理必须先看一下这2个方法. jQuery.fn.extend({ ...... ...

随机推荐

  1. linux -- 个人笔记

    ##转自别人的博客 一般直接用tar命令打包很简单,直接使用 tar -zcvf test.tar.gz test 即可. 在很多时候,我们要对某一个目录打包,而这个目录下有几十个子目录和子文件,我们 ...

  2. centos手动配置IP和DNS

    手动设置ip地址 如果虚拟机不能自动获取IP,只能手动配置,配置方法如下: 输入命令 #vi /etc/sysconfig/network-scripts/ifcfg-eth0 [编辑网卡的配置文件] ...

  3. jenkins 集成钉钉机器人

    最早做Jenkins发布完成以后通过邮件发送信息通知相关的联系人,发现邮件会受限于大家接收的设置,导致不能及时的看到相关的发布内容,公司使用钉钉做为公司内部的通讯工具,所以想通过Jenkins发布完成 ...

  4. 《安卓网络编程》之第三篇 使用Apache接口

    在Android系统中,提供了一下三种通信接口: 标准的Java 接口:java.net Apache接口:org.apache.http Android网络接口:android.net.http 在 ...

  5. R语言通过loess去除某个变量对数据的影响

      当我们想研究不同sample的某个变量A之间的差异时,往往会因为其它一些变量B对该变量的固有影响,而影响不同sample变量A的比较,这个时候需要对sample变量A进行标准化之后才能进行比较.标 ...

  6. /proc/kcore失效,调试其文件系统相关模块,使重新正常工作

    为分析内核,在有限的机器上用虚拟机装了CentOS.6.9.i386.minimal,重新编译了3.19.8内核并克隆.当使用/proc/kcore进行内核动态映像调试时,发现与kgdb远程调试端读到 ...

  7. (高级篇 Netty多协议开发和应用)第十章-Http协议开发应用(基于Netty的HttpServer和HttpClient的简单实现)

    1.HttpServer package nettyHttpTest; import io.netty.bootstrap.ServerBootstrap; import io.netty.chann ...

  8. mysql5.6创建新用户并给授权指定的数据库权限

    一.环境: CentOS 6.8 mysql 5.6 二.背景 给外包的工作人员提供我司某台服务器的 mysql 中某个数据库的访问权限. 之所以要做限制,是防止他们对我司其他的数据库非法进行操作. ...

  9. 01 json环境搭建

    1 导包 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.o ...

  10. java中File类应用:遍历文件夹下所有文件

    练习: 要求指定文件夹下的所有文件,包括子文件夹下的文件 代码: package 遍历文件夹所有文件; import java.io.File; public class Test { public ...