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. 三、Centos7安装Mysql

    1.到服务器下载的链接 wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2.执行命令 sudo r ...

  2. 三、Redis的配置文件和多数据库用途

    1.使用文件 # 使用配置文件启动 redis-server ./redis.conf # 带配置文件启动 且指定某几个配置 配置名称前加 -- redis-server ./redis.conf - ...

  3. Sass--嵌套选择器

    Sass 中还提供了选择器嵌套功能,但这也并不意味着你在 Sass 中的嵌套是无节制的,因为你嵌套的层级越深,编译出来的 CSS 代码的选择器层级将越深,这往往是大家不愿意看到的一点.这个特性现在正被 ...

  4. JavaSE---main方法解读

    1.概述 1.1 java程序入口:main方法 public static void main(String[] args){} a,public:java类由JVM调用,为了让JVM自由调用mai ...

  5. 【leetcode】452. Minimum Number of Arrows to Burst Balloons

    题目如下: 解题思路:本题可以采用贪心算法.首先把balloons数组按end从小到大排序,然后让第一个arrow的值等于第一个元素的end,依次遍历数组,如果arrow不在当前元素的start到en ...

  6. 部署.net Core 到 Windows server 2008 r2 IIs

    1. 将项目发布 2.iis 新建网站,设置 3 安装windows  server  hosting 4 关于报错 1.下载sdk https://www.microsoft.com/net/lea ...

  7. centos7.5部署ELk

    第1章 环境规划 1.1 ELK介绍       ELK是ElasticSerach.Logstash.Kibana三款产品名称的首字母集合,用于日志的搜集和搜索.      Elasticsearc ...

  8. throw throws 区别

    throw是语句抛出一个异常.语法:throw (异常对象);         throw e; throws是方法可能抛出异常的声明.(用在声明方法时,表示该方法可能要抛出异常)语法:[(修饰符)] ...

  9. legend2---17、legend2里面怎么面向对象

    legend2---17.legend2里面怎么面向对象 一.总结 一句话总结: mvc本身挺优:本身mvc的开发模式,就算是面向过程下也还行,如果面向对象那就更加棒了 实体类无需属性:由于php的生 ...

  10. P1476 休息中的小呆

    P1476 休息中的小呆 题目描述 当大家在考场中接受考验(折磨?)的时候,小呆正在悠闲(欠扁)地玩一个叫“最初梦想”的游戏.游戏描述的是一个叫pass的有志少年在不同的时空穿越对抗传说中的大魔王ch ...