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

   function showdiv()  {

   	document.getElementById("show").style.display = "block";

   	 document.getElementById('strHref').innerHTML="收起";

   	 document.getElementById('strHref').href="javascript:hidediv();";

   }

   function hidediv() {

   	  document.getElementById('show').style.display='none';

   	 document.getElementById('strHref').innerHTML="更多选项+";

   	 document.getElementById('strHref').href="javascript:showdiv();";

   }

　　效果；

js实现点击按钮控制展开与收起.的更多相关文章

  1. js实现点击按钮时显示弹框，点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  2. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  3. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  4. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  5. JS实现点击按钮，下载文件

    PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...

  6. 鼠标点击按钮控制图片移动或者键盘控制图片移动（解决问题：parseInt失效问题，用Number）

    在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...

  7. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  8. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

  9. js实现点击按钮实现上一张下一张相册滚动效果

    /****判断图片是否构成滚动效果*/$(function(){    if($("#bar").find('img').size()*71<=$("#bar&qu ...

随机推荐

  1. C++ I/O库练习

    编写函数,以读模式打开一个文件,将其内容读入到一个string的vector中,将每一行作为一个独立的元素存于vector中,并输出. 思路:1.以读的模式打开文件“目录.txt”: 2.先创建str ...

  2. mongodb使用本地日期查询

    db.getCollection('userLog').find({createAt:{"$gt":new Date("2018-08-05"),"$ ...

  3. C++ 虚函数和多重继承的内存布局初探

    C++ 对象的内存布局 一切以事实说话: 代码: 1: #include <stdio.h> 2:  3: class A { 4: public: 5: int a; 6: int b; ...

  4. webpack学习（一）起步安装

    起步   webpack 用于编译 JavaScript 模块.一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互.如果你还不熟悉 webpack,请阅读核心概念和打包器 ...

  5. solrconfig.xml主要配置项

    solrconfig.xml中的配置项主要分以下几大块: 1.依赖的lucene版本配置,这决定了你创建的Lucene索引结构,因为Lucene各版本之间的索引结构并不是完全兼容的,这个需要引起你的注 ...

  6. curl分析请求的各个部分耗时情况

    curl 命令提供了 -w 参数,解释如下 -w, --write-out Make curl display information on stdout after a completed tran ...

  7. apue 第6章 系统数据文件和信息

    在给出用户登录名或数值用户ID后,这两个函数就能查看相关项. #include <sys/types.h> #include <pwd.h> struct passwd *ge ...

  8. uORBMain.cpp学习

    uorb_main int uorb_main(int argc, char *argv[]) { if (argc < 2) { usage();                        ...

  9. leetcode骚题目列表

    114,二叉树原地前序遍历转链表 令人不舒服的空间限制 4,O(logn)寻找两个数组的中位数 感觉诡异又很其妙的二分 279,判断一个数可拆成最少几个平方数的和 有O(n)解法,如果把sqrt视为O ...

  10. BZOJ 3585: mex(分块+莫队)

    传送门 解题思路 首先直接莫队是能被卡的,时间复杂度不对.就考虑按照值域先进行分块再进行莫队,然后统计答案的时候就暴力扫所有的块,直到一个块内元素不满,再暴力扫这个块就行了,时间复杂度O(msqrt( ...