html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>下拉与收起</title>

		<link rel="stylesheet" href="css/showhide.css" />

		<script type="text/javascript" src="js/showhide.js" ></script>

	</head>

	<body>

		<div id="showhide">

			<p>假如生活欺骗了你</p>

			<p>不要悲伤，不要哭泣</p>

			<p>忧郁的日子总会过去的</p>

			<div id="show" style="display:none;">

				<p>

					因为你要知道，再挣扎也是没用的，它还是会再欺骗你一次

				</p>

				<p>

				直至你在失望与孤独中死去

				</p>

			</div>

		</div>

		 <p class="slide">

            <a href="javascript:showdiv();"  id="strHref"   class="btn-slide">更多选项+

            </a>

		 </p>

	</body>

</html>

　　css

 body

        {

            margin: 0 auto;

            padding: 0;

        }

        a:focus

        {

            outline: none;

        }

        #showhide

        {

            background: black;

            color: white;

            width: 600px;

            display: block;

            margin: 0 auto;

            padding: 5px;

            font-size: 20px;

            height: auto;

            font-family: "微软雅黑";

        }

        .slide

        {

            margin: 0;

            padding: 0;

            width: 600px;

            border-top: solid 4px gray;

            margin: 0 auto;

        }

       .btn-slide

        {

            background: gray;

            text-align: center;

            width: 120px;

            height: 30px;

            padding: 10px 10px 0 0;

            margin: 0 auto;

            display: block;

            color: #fff;

            text-decoration: none;

        }

　　js

 $(document).ready(function () {

            $(".btn-slide").click(function () {

                $("#show").slideToggle();

            });

        });

　　效果；

2017-11-02   09:56:57

jQuery实现点击按钮展开和收起的更多相关文章

  1. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  2. jquery实现点击按钮弹出层和点击空白处隐藏层

    昨天做项目遇到一个问题,和大家分享下,jquery实现点击按钮弹出层和点击空白处隐藏层的问题 if($('.autoBtn').length){                $('.autoBtn' ...

  3. vue自己写了一个div菜单，点击按钮展开，点击其他地方关闭这个div菜单

    需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...

  4. jquery 实现 点击按钮后倒计时效果，多用于实现发送手机验证码、邮箱验证码

    原文链接:http://www.cnblogs.com/steed-zgf/archive/2012/02/03/2336984.html <!DOCTYPE html PUBLIC " ...

  5. jquery实现点击按钮滑动到指定位置

    <body> <script type="text/javascript"> function click_scroll() { var scroll_of ...

  6. jquery 实现点击按钮后出现倒计时效果（用于实现发送手机验证码、邮箱验证码）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 记录--前端 页面 jquery 被点击按钮修改样式 其他默认

    jquery实现页面条件筛选 此功能类似淘宝的条件筛选,主要是页面样式的更改,问了大神也磨磨唧唧了很久才搞定0.0.... 先贴代码..... 代码知识有 border-radius 设置圆角边框 s ...

  8. js jquery 实现点击按钮后,倒计时60秒才能再次点击发送验证邮件

    <input type="button" id="btn" value="免费获取验证码" /><script type= ...

  9. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

随机推荐

  1. centos 搭建本地YUM源并使用apache共享YUM源

    搭建本地YUM源 1.挂载镜像 2.搭建本地YUM源 删除多余repo文件保留一个就行 本地YUM源就搭建好了 yum repolist 查看yum源 3.使用apache共享YUM源 YUM服务器配 ...

  2. Android Studio 打包生成正式apk（XXX-release.apk）的两种方式

    { 方式一:使用Android Studio生成1.点击Build->Generate Signed apk,首次点击可能会提示输入操作系统密码2.弹出如下对话框,还没有生成过keystore ...

  3. Freemarker模板和依赖

    <html> <head> <meta charset="utf-8"> <title>Freemarker入门小DEMO < ...

  4. Struts拦截器Interceptor

    Struts2 拦截器 [Interceptor] 拦截器的工作原理如上图,每一个Action请求都包装在一系列的拦截器的内部.拦截器可以在Action执行直线做相似的操作也可以在Action执行直后 ...

  5. RzPageControl(pagecontrol)

    实现多标签的动态添加,切换,关闭 使用RzPageControl来实现多标签页使用菜单来打开标签页,通过标签页的caption来判断将标签页是否已经被打开过了.1.创建标签页,并判断是否是已经打开过的 ...

  6. [CSP-S模拟测试60]题解

    回去要补一下命运石之门了…… A.嘟嘟噜 给定报数次数的约瑟夫,递推式为$ans=(ans+m)\% i$. 考虑优化,中间很多次$+m$后是不用取模的,这种情况就可以把加法变乘法了.问题在于如何找到 ...

  7. asp.net ToString() 输出格式详细

    C 货币 2.5.ToString("C") ￥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...

  8. 探索Redis设计与实现13：Redis集群机制及一个Redis架构演进实例

    本文转自互联网 本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial ...

  9. JavaScript--字符串与JSON对象相互转换

    JSON.parse() 兼容性:Chrome,Firefox (Gecko) 3.5 (1.9.1),IE 8.0,Safari 4.0 JSON.parse('[1, 5, "false ...

  10. AndroidManifest.xml配置文件详解（转）

    转载博客:http://blog.csdn.net/shagoo/article/details/7485958# AndroidManifest.xml配置文件对于Android应用开发来说是非常重 ...