html

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>下拉与收起</title>
  6. 		<link rel="stylesheet" href="css/showhide.css" />
  7. 		<script type="text/javascript" src="js/showhide.js" ></script>
  8. 	</head>
  9. 	<body>
  10. 		<div id="showhide">
  11. 			<p>假如生活欺骗了你</p>
  12. 			<p>不要悲伤，不要哭泣</p>
  13. 			<p>忧郁的日子总会过去的</p>
  14. 			<div id="show" style="display:none;">
  15. 				<p>
  16. 					因为你要知道，再挣扎也是没用的，它还是会再欺骗你一次
  17. 				</p>
  18.  
  19. 				<p>
  20. 				直至你在失望与孤独中死去
  21. 				</p>
  22. 			</div>
  23.  
  24. 		</div>
  25. 		 <p class="slide">
  26.             <a href="javascript:showdiv();"  id="strHref"   class="btn-slide">更多选项+
  27.             </a>
  28. 		 </p>
  29.  
  30. 	</body>
  31. </html>

　　css

  1.  body
  2.         {
  3.             margin: 0 auto;
  4.             padding: 0;
  5.         }
  6.         a:focus
  7.         {
  8.             outline: none;
  9.         }
  10.         #showhide
  11.         {
  12.             background: black;
  13.             color: white;
  14.             width: 600px;
  15.             display: block;
  16.             margin: 0 auto;
  17.             padding: 5px;
  18.             font-size: 20px;
  19.  
  20.             height: auto;
  21.             font-family: "微软雅黑";
  22.         }
  23.         .slide
  24.         {
  25.             margin: 0;
  26.             padding: 0;
  27.             width: 600px;
  28.             border-top: solid 4px gray;
  29.             margin: 0 auto;
  30.         }
  31.        .btn-slide
  32.         {
  33.             background: gray;
  34.             text-align: center;
  35.             width: 120px;
  36.             height: 30px;
  37.             padding: 10px 10px 0 0;
  38.             margin: 0 auto;
  39.             display: block;
  40.             color: #fff;
  41.             text-decoration: none;
  42.         }

　　js

  1.    function showdiv()  {
  2.    	document.getElementById("show").style.display = "block";
  3.  
  4.    	 document.getElementById('strHref').innerHTML="收起";
  5.    	 document.getElementById('strHref').href="javascript:hidediv();";
  6.    }
  7.    function hidediv() {
  8.    	  document.getElementById('show').style.display='none';
  9.    	 document.getElementById('strHref').innerHTML="更多选项+";
  10.    	 document.getElementById('strHref').href="javascript:showdiv();";
  11.    }

　　效果；

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. 一、Json

    一.Json遍历模糊查询 你没admin 所以这句话报错. //1.写法 dynamic query = from user in jsonObject where (user.ToString(). ...

  2. socket套接字编程 HTTP协议

    socket套接字编程  套接字介绍  1. 套接字 : 实现网络编程进行数据传输的一种技术手段  2. Python实现套接字编程:import  socket  3. 套接字分类 >流式套接 ...

  3. 基于 Scrapy-redis 两种形式的分布式爬虫

    基于 Scrapy-redis 两种形式的分布式爬虫 .caret, .dropup > .btn > .caret { border-top-color: #000 !important ...

  4. Codeforces 669E cdq分治

    题意:你需要维护一个multiset,支持以下操作: 1:在某个时间点向multiset插入一个数. 2:在某个时间点在multiset中删除一个数. 3:在某个时间点查询multiset的某个数的个 ...

  5. java中数据库和VO的一一对应关系

    如图所示,数据库中数据如果有下划线,则JavaVO中删除,除第一个单词外,其他单词首字母大写

  6. OpenCV常用基本处理函数（4）简单变换，阈值等

    几何变换 缩放 img=cv2.imread('messi5.jpg') # 下面的 None 本应该是输出图像的尺寸,但是因为后边我们设置了缩放因子 # 因此这里为 None res=cv2.res ...

  7. Mysql中存储过程和函数的写法

    MySQL中,创建存储过程的基本形式如下: CREATE PROCEDURE sp_name ([proc_parameter[,...]]) [characteristic ...] routine ...

  8. MySQL慢SQL语句常见诱因

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11429037.html 1. 无索引.索引失效导致慢查询 如果在一张几千万数据的表中以一个没有索引的列 ...

  9. 【leetcode】552. Student Attendance Record II

    题目如下: Given a positive integer n, return the number of all possible attendance records with length n ...

  10. NORDIC内核ARM蓝牙芯片NRF51802/NRF51822

    Nordic  nRF51 系列的IC 和协议堆栈对内存大小.封装类型.接口.周边产品及无线连接提供更多选择. 关于 nRF51 系列 多协议 2.4GHz 射频收发器拥有高性能.超低功耗以及灵活性等 ...