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计算机视觉2：图像边缘检测

    我是一名初学者,如果你发现文中有错误,请留言告诉我,谢谢 如果需要检测到图像里面的边缘,首先我们需要知道边缘处具有什么特征. 对于一幅灰度图像来说,边缘两边的灰度值肯定不相同,这样我们才能分辨出哪里是 ...

  2. [statsvn]-svn代码量统计

    用statasvn进行代码量统计的时候,第一步需要获取到项目的日志,但是我本机的svn1.4没有安装命令行,重新运行1.4的安装包也没有命令行的选项... 那就升级到最新的svn1.8好了,下载最新的 ...

  3. Oracle的几种索引

    Oracle 提供了多种不同类型的索引以供使用.简单地说, Oracle 中包括如下索引: 1. B* 树索引 这些是我所说的 “ 传统 “ 索引.到目前为止,这是 Oracle 和大多数其他数据库中 ...

  4. Linux实现SSH无密码登录（对目录权限的设置非常详细，可以参考一下）

    假设服务器IP地址为192.168.1.1,机器名:cluster.hpc.org 客户端IP地址为172.16.16.1,机器名:p470-2.wangrx.sioc.ac.cn 客户端用户yzha ...

  5. Asp.net MVC Web.config配置技巧

    一.视图引入命名空间的设置 之前经常写这样的代码,而且每个页面都要写: @model IEnumerable<MvcStart.Models.People_Model> 其实有一种很方便的 ...

  6. cf472B Design Tutorial: Learn from Life

    B. Design Tutorial: Learn from Life time limit per test 1 second memory limit per test 256 megabytes ...

  7. Implement Hash Map Using Primitive Types

    A small coding test that I encountered today. Question Using only primitive types, implement a fixed ...

  8. Java菜鸟学习笔记--数组篇(三):二维数组

    定义 //1.二维数组的定义 //2.二维数组的内存空间 //3.不规则数组 package me.array; public class Array2Demo{ public static void ...

  9. poj 2115 C Looooops（推公式+扩展欧几里得模板）

    Description A Compiler Mystery: We are given a C-language style for loop of type for (variable = A; ...

  10. Unity 鼠标点击左右移动,人物跟随旋转

    上代码: using UnityEngine; using System.Collections; public class Test : MonoBehaviour { private Vector ...