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. python 在linux下通过top,和dh命令获得cpu,内存,以及硬盘信息

    主要是通过os.popen读取命令输出实现的,os.popen启动新的进程,且将外部命令的输出作为文件类型对象返回.不能获得外部命令的返回值.既然是文件对象就可以直接用for in 来读取,代码如下: ...

  2. Spring Task Scheduler - No qualifying bean of type [org.springframework.scheduling.TaskScheduler] is defined

    1. Overview In this article, we are discussing the Springorg.springframework.beans.factory.NoSuchBea ...

  3. javaWeb Cache技术――OSCache(转-全)

    什么是osCache? 它是:http://baike.baidu.com/view/1835163.htm?fr=aladdin OSCache使用指南 一.下载安装 OSCache是一个基于web ...

  4. shell脚本语法基础汇总

    shell脚本语法基础汇总 将命令的输出读入一个变量中,可以将它放入双引号中,即可保留空格和换行符(\n) out=$(cat text.txt) 输出1 2 3 out="$(cat te ...

  5. HTML5视音频小结

    目前,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件.HTML5 规定了一种通过 video 元素来包含视频的标准方法.当前HTML5只支持三种格式的视频. 格 ...

  6. 回归分析:非线性nlinfi

    今天测试.这首题,真的很头疼,第一次看到这个题,就知道要用nlinefit函数做,但是我一个地方没搞清楚, 花了我40多分钟还没做也来. 最后终于是调用的函数出错了.主要是没有将一个列抽出来.一个二维 ...

  7. Webix快速跨浏览器的JavaScript UI组件

    网址:http://webix.com/ 寥寥几行代码就将页面渲染出来了,确实值得一试!

  8. JNI的替代者—使用JNA访问Java外部功能接口

    摘自:http://www.cnblogs.com/lanxuezaipiao/p/3635556.html JNI的替代者-使用JNA访问Java外部功能接口 1. JNA简单介绍 先说JNI(Ja ...

  9. docker 实战---使用oracle xe作为开发数据库(六)

    oracle作为oltp的大佬,非常多行业应用都会用到它.那么在开发的过程中就不可避免的要使用oracle数据库,oracle数据库的版本号有好多,当中express版本号是免费的开发版.它的主要限制 ...

  10. Hibernate annotation多对多配置

    角色(用户组),用户多对多. 角色实体配置: private Set<TAuthUser> users; @ManyToMany @JoinTable(name="t_auth_ ...