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. css3--css3模块

    CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 1.选择器(.基本选择器,层次选择器,伪类选择器,伪元素,属性选择器,通配符) 2.盒模 ...

  2. 解决error: Microsoft Visual C++ 14.0 is required 问题

    1.https://964279924.ctfile.com/fs/1445568-239446865 2.重新安装 .Net framework 更高的版本:https://support.micr ...

  3. sql对表的操作

    --insert into pppcopy select * from ppp //从表ppp中获取数据,并将其插入到pppcopy中,只拷贝表的数据,不拷贝表的结构(前提:表pppcopy1存在) ...

  4. Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发接口化框架

    整体框架使用的是:Python+Unittest+Requests+PyMysql+HTMLReport 多线程并发模式 主要依赖模块 Unittest.Requests.PyMysql.HTMLRe ...

  5. REF游标

    ----4.7 ref游标(loop循环) /*** 怎么使用  REF游标 ?  ①声明REF 游标类型,确定REF 游标类型:   ⑴强类型REF游标:指定retrun type,REF 游标变量 ...

  6. mysql的安裝

    记得上学的时候,“研究”过一次mysql,找了篇文章,在课堂上念了.至今已经10余年,居然没再碰过数据库,自以为做嵌入式不用数据库,回头一看,却已经out许久... 上网下到最新的mysql5.5,从 ...

  7. Android中通过进程注入技术修改广播接收器的优先级

    前言 这个周末又没有吊事,在家研究了如何通过进程的注入技术修改广播接收器的优先级,关于这个应用场景是很多的,而且也很重要,所以就很急的去fixed了. Android中的四大组件中有一个广播:Broa ...

  8. textAppearance的属性设置

    android:textAppearance="?android:attr/textAppearanceSmall" android:textAppearance="?a ...

  9. [CSP-S模拟测试53]题解

    A.u 只涉及到区间修改可以考虑差分,然而如果每一行都差分复杂度还是过高.我们发现差分标记也是连续的(一行横着的一行斜着的),所以可以维护两个 差分的差分,扫两遍统计即可. #include<c ...

  10. python reduce（）函数使用

    reduce()的使用方法形如reduce(function, iterable[, initializer]),它的形式和map()函数一样.不过参数f(x)必须有两个参数,initializer是 ...