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. Ubuntu下下载使用sublime

    使用Sublime真心很舒服.安装方法很简单,如下 进入官网http://www.sublimetext.com/2下载你的Sublime Text 2,然后解压文件. 把解压后得到的文件移动到/us ...

  2. Tmux 中开启鼠标选择与复制

    在 tmux.conf 中加入下列设置(tmux 2.1 之前的版本): set -g mode-mouse on set -g mouse-resize-pane on set -g mouse-s ...

  3. 微信小程序学习一 微信小程序的四个基本文件

    微信小程序有四种类型的文件 js 类型文件 小程序的逻辑代码文件 小程序对js es6的处理比较友好,基本上我们的es6语法都需要使用babel插件去转化成es5(具体是什么原因,自己可以去了解一下) ...

  4. PHP+Redis 有序集合实现 24 小时排行榜实时更新

    基本介绍 Redis 有序集合和集合一样也是 string 类型元素的集合,且不允许重复的成员. 不同的是每个元素都会关联一个 double 类型的分数.redis 正是通过分数来为集合中的成员进行从 ...

  5. Android---OS

    一.概述 基于Linux的OS,内置JVM 二.发展史 二.系统架构

  6. 【leetcode】935. Knight Dialer

    题目如下: A chess knight can move as indicated in the chess diagram below:  .            This time, we p ...

  7. python学习--第三天 粗略介绍人脸识别

    首先安装opencv 在安装opencv过程中遇到一些错误(百度解决) 直接贴代码吧,讲师略讲了一下,体会不深,以后有机会深入学习,再详细介绍解释吧 人脸识别训练集应该可以网上下载吧,都是开源的 im ...

  8. 版本控制系统之SVN和GIT的区别

    版本控制器的作用: 1. 可以协同代码管理,让多人开发代码得以实现. 2. 回归到以前的任何一个时间点的代码处(好比:开始写了很多代码,后面有修改了一些,突然IDE崩溃,但是发现还是以前的代码更好,这 ...

  9. 【软工项目Beta阶段】第11周Scrum会议博客

    第十一周会议记录 小组GitHub项目地址https://github.com/ouc-softwareclass/OUC-Market 小组Issue地址https://github.com/ouc ...

  10. ZROI week5

    考试 Part 简单题,从结尾倒着扫一遍就行. Pref 选一个最长的好的序列. 题目有点小简单,似乎直接哈希就行,然后还打了一遍\(kmp\). Chess 一道很不错的题目,用异或维护修改即可. ...