Jquery一个slideToggle搞定div的隐藏与显示

<!DOCTYPE html>

<html>

<head>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideToggle("slow");

});

});

</script>

<style type="text/css">

#panel,#flip

{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel

{

padding:50px;

display:none;

}

</style>

</head>

<body>

<div id="flip">Click to slide the panel down or up</div>

<div id="panel">Hello world!</div>

</body>

</html>

原文：http://www.runoob.com/jquery/jquery-ref-selectors.html

Jquery一个slideToggle搞定div的隐藏与显示的更多相关文章

  1. jQuery点击按钮实现div的隐藏和显示切换效果

    <script type="text/javascript"> $(function(){ $('#click_event').click(function(){  i ...

  2. 将你的前端应用打包成docker镜像并部署到服务器？仅需一个脚本搞定

    1.前言 前段时间,自己搞了个阿里云的服务器.想自己在上面折腾,但是不想因为自己瞎折腾而污染了现有的环境.毕竟,现在的阿里云已经没有免费的快照服务了.要想还原的话,最简单的办法就是重新装系统.而一旦重 ...

  3. 承载地图的div如果隐藏再显示，则定位时会定位到页面左上角

    承载地图的div如果隐藏再显示,则定位时会定位到页面左上角. 解决方法:不隐藏,改变div的高度.在div上利用z-index加一个新的不透明的div.

  4. 点击按钮对两个div的隐藏与显示进行切换

    HTML: <button type="button"  id="showHidden">点击切换div的隐藏与显示</button> ...

  5. 如何让两个div在同一行显示?一个float搞定

    最近在学习div和css,遇到了一些问题也解决了很多以前以为很难搞定的问题.比如:如何让两个div显示在同一行呢?(不是用table表格,table对SE不太友好)其实,<div> 是一个 ...

  6. 一个类搞定UIScrollView那些事

    前言 UIScrollView可以说是我们在日常编程中使用频率最多.扩展性最好的一个类,根据不同的需求和设计,我们都能玩出花来,当然有一些需求是大部分应用通用的,今天就聊一下以下需求,在一个categ ...

  7. 一个类搞定UIScrollView那些事儿

    前言 UIScrollView可以说是我们在日常编程中使用频率最多.扩展性最好的一个类,根据不同的需求和设计,我们都能玩出花来,当然有一些需求是大部分应用通用的,今天就聊一下以下需求,在一个categ ...

  8. 一个命令搞定 Web 国际化

    背景 随着出海的业务越来越多,web 应用面临越来越多的国际化的工作.如何高效,高质量的完成 Web 前端国际化工作,已经是摆在 web 前端同学的急需解决的问题. i18n-helper-cli 是 ...

  9. iOS之下拉放大，上推缩小，一个方法搞定

    先来看看效果吧. 讲讲大概的实现思路:1､创建头部的视图和tableview,需要注意的是tableview要设置contentInset,contentInsent 的顶部要和头部视图的背景图的高度 ...

随机推荐

  1. php连接postgresql

    在ubuntu下用php连接postgresql需要下个模块php5-pgsql 连接数据库并显示一张表的内容: <?php #连接数据库 $conn = pg_connect("ho ...

  2. 在Cocos2d-X中新建Android项目

    Windows下创建Cocos2d-X的Android项目并不复杂,关键是要改几个环境变量 一.进入Cocos2d-X主目录修改“create-android-project.bat” 大家都知道要点 ...

  3. Erlang千万级用户游戏框架（Openpoker）源码文件分析清单

    openpoker源码 erlang写的网游服务器源码,OpenPoker是一个大型多人扑克网游,内建支持了容错能力,负载平衡和无限制的规模大小.本文是openpoker源码文件功能的一个清单式说明: ...

  4. Min Stack 解答

    Question Design a stack that supports push, pop, top, and retrieving the minimum element in constant ...

  5. Unique Paths 解答

    Question A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram be ...

  6. structs 拦截器

    首先,要跟大家道个歉,前一阵子为给客户个一个DEMO,忙得不可开交,所以很久没有更新Blog.提到这个DEMO我想顺便跟大家分享一下心得——如果大家希望快速开发,一个类似Struts 2这样的简单方便 ...

  7. linux 在批处理中，完整路径有空格的处理方式（加引號）

    cp -f E:/XML_EDITOR/xmleditor25/xmleditor/Editor_UIOuterCtrl/TraceViewDlg.cpp E:/XML_EDITOR/'XMLEdit ...

  8. ubuntu中文实训手册

    http://people.ubuntu.com/~happyaron/udc-cn/lucid-html/ http://www.apachefriends.org/zh_cn/xampp-linu ...

  9. Kolor Neutralhazer v1.0.2 (照片雾气模糊去除过滤器)+破解RI

    由于空气污染.阴霾几天越来越,根据照片始终是一个灰色,怎么做?有了这个插件.能够解除您的烦恼. Neutralhazer这是消除你的风景照片和雾气模糊的全景图的有效途径photoshop小工具. wa ...

  10. 《JavaScript 闯关记》之数组

    数组是值的有序集合.每个值叫做一个元素,而每个元素在数组中有一个位置,以数字表示,称为索引. JavaScript 数组是无类型的,数组元素可以是任意类型,并且同一个数组中的不同元素也可能有不同的类型 ...