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. IE6 js修改img的src属性问题

    今天在做项目,有个点击按钮切换图片功能,即修改img的src属性,在IE6下测试,切换图片不显示,右键选择显示图片,可以显示出来,琢磨了很久,最终发现是因为该按钮是a标签导致的, 随后上网查了下,有些 ...

  2. 51单片机实现对24C02进行页写、顺序读取并显示验证

    //************************************************************************************* //**程序名称:51单 ...

  3. MFC界面开发（QQ透明皮肤：多层算法，一键适配各种背景 ）

    http://blog.csdn.net/kent19900125/article/category/1368203/3 QQ透明皮肤:多层算法,一键适配各种背景 . http://blog.csdn ...

  4. android 签名被篡改(Keystore was tampered with, or password was incorrect)

    在配置自定义签名时出现了"Keystore was tampered with, or password was incorrect"错误! 参考文档发现: If necessar ...

  5. elasticsearch 搜索不支持单词的部分进行匹配

    zjtest7-frontend:/usr/local/logstash-2.3.4/config# curl -XGET http://192.168.32.80:9200/logstash-201 ...

  6. Course Schedule II 解答

    Question There are a total of n courses you have to take, labeled from 0 to n - 1. Some courses may ...

  7. C++对象模型浅析

    本文仅代表博主自己对C++内存对象模型的一点理解,如果文中有 理解偏差和不准确的地方,希望各位大大提出,我好及时改正. 本博文只对博主自己负责,不对任何人负责. 就如<深度探索C++对象模型&g ...

  8. 剑指offer-面试题10:二进制中1的个数

    题目:请实现一个函数,输入一个函数,输出该数二进制表示中1的个数.例如把9 表示成二进制是1001,有2位是1.因此如果输入9,该函数输出2. 这道题最典型的方法就是用移位统计,就比如统计9的二进制1 ...

  9. C++ classics

    common Business-Oriented LanguageBASIC(Beginner's All-purpose Symbolic Instruction Code)1972 C1983 C ...

  10. [每日一题] 11gOCP 1z0-052 :2013-09-25 Lock ――for update.................................C23

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/12021587 正确答案:ABE 这道题需要我们了解锁的知识点. TM锁的模式: 0-Non ...