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. JavaEE Tutorials (30) - Duke综合案例研究示例

    30.1Duke综合应用的设计和架构456 30.1.1events工程458 30.1.2entities工程459 30.1.3dukes—payment工程461 30.1.4dukes—res ...

  2. eclipse工具再学习

    今天下午最后近1小时及晚上2个多小时,我都花费时间在工程环境配置上,自尊心被严重摧残,各种郁闷和抱怨.源头是我部分刷新代码后运行工程依赖的jar报错,后来找同事发现是因为我没更新pom.xml文件,重 ...

  3. Headroom.js

    下载 Development (3.7kB) Production (1.7kB) Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它 ...

  4. CreateThread简单那多线程编程

    CreateThread简单那多线程编程 作者:vpoet mail:vpoet_sir@163.com 在进行多任务处理的时候我们往往会用到多线程技术,多线程理论上是多个线程同事处理不同的工作,但是 ...

  5. U盘启动盘的制作与U盘重装系统

    网上有各种各样的装系统的方法,也有各种不同的操作系统版本. 本文介绍如何有UtraISO将U盘制作成系统启动盘,本文用于制作的系统是纯净的32位win7旗舰版. 可到http://itellyou.c ...

  6. 【POJ 3279 Fliptile】开关问题，模拟

    题目链接:http://poj.org/problem?id=3279 题意:给定一个n*m的坐标方格,每个位置为黑色或白色.现有如下翻转规则:每翻转一个位置的颜色,与其四连通的位置都会被翻转,但注意 ...

  7. Poj 2187 Beauty Contest_旋转凸包卡壳

    题意:给你n个坐标,求最远的两点距离 思路:用凸包算法求处,各个定点,再用旋转凸包卡壳 #include <iostream> #include <cstdio> #inclu ...

  8. 网易云课堂_C++开发入门到精通_章节6:多态

    课时33示例--为多态基类声明虚析构函数 微软校园招聘笔试题 #include <iostream> class Base { public: char Value() { return ...

  9. jquery第一期：运行第一个jquery

    首先下载js文件,网址jquery.com去下载,可以下载1.10版的 首先打开editplus进行编辑,添加js文件: 编写代码: <!DOCTYPE html PUBLIC "-/ ...

  10. ZendStudio快捷键 注释的快捷键

    注:本文省略“通用快捷键”描述,诸如:ctrl+N=新建,ctrl+O=打开,ctrl+C=复制,ctrl+V,ctrl+X……等等几乎所有软件都通用的一组快捷键,而着重介绍zde独有的快捷键,了解并 ...