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. 力扣——single number （只出现一次的数字） python实现

    题目描述: 中文: 给定一个非空整数数组,除了某个元素只出现一次以外,其余每个元素均出现两次.找出那个只出现了一次的元素. 说明: 你的算法应该具有线性时间复杂度. 你可以不使用额外空间来实现吗? 英 ...

  2. fiddler 4 抓取 https 设置

    Fiddler抓取https 设置 1.打开fiddler,点击工具栏中的Tools—>Options,点击Actions,选择最后一项,Reset All certificates,然后关闭, ...

  3. Es学习第六课， ES基本搜索_search

    前面几课ES的基本概念.安装和分词都讲过了,下面我们就来实战一下ES的核心功能-搜索,这节课我们主要讲的是基本搜索 _search(注意:ES的关键字都要加前缀_,所以我们在定义索引.类型名称时不要带 ...

  4. Jquery中的offset()和position()深入剖析(元素定位)

    先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. position(): 获取匹配元素相对父 ...

  5. JavaScript 六种继承方式

    title: JS的六种继承方式 date: 2017-06-27 05:55:49 tags: JS categories: 学习 --- 继承是面向对象编程中又一非常重要的概念,JavaScrip ...

  6. kubernetes使用kubeadm升级集群

    升级前准本  官网: https://kubernetes.io/docs/reference/setup-tools/kubeadm/kubeadm-upgrade/查看可升级的组件 [root@h ...

  7. BZOJ 1778: [Usaco2010 Hol]Dotp 驱逐猪猡(高斯消元+期望dp)

    传送门 解题思路 设\(f(x)\)表示到\(x\)这个点的期望次数,那么转移方程为\(f(x)=\sum\frac{f(u)*(1 - \frac{p}{q})}{deg(u)}\),其中\(u\) ...

  8. Some Simple Mistakes I had

    This week, I had some mistakes. It is really hard to say: #1 py business what's happening l = abs(px ...

  9. （转）MAVEN的安装和Myeclipse+maven的配置和使用

    转:https://blog.csdn.net/shikongshengzhu/article/details/51779159 MAVEN的安装和Myeclipse+maven的配置和使用 步骤如下 ...

  10. php开发面试题---php缓存总结

    php开发面试题---php缓存总结 一.总结 一句话总结: 缓存主要分本地缓存和分布式缓存两种 可以用分布式本地缓存:把那些常用的.不容易变的页面.数据都存下来 1.常用的缓存构架? 分布式本地缓存 ...