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. 中州韵输入法(rime)导入搜狗词库

    rime是一个非常优秀的输入法,linux平台下的反应速度远超搜狗,也没有隐私风险.2012年开始接触它,到后来抛弃了它,因为rime自带的词库真的太弱了,也懒得折腾.最近发现一个词库转换软件叫ime ...

  2. SQLRecoverableException: I/O Exception: Connection reset

    https://stackoverflow.com/questions/6110395/sqlrecoverableexception-i-o-exception-connection-reset T ...

  3. maven打包出现 Error assembling JAR: java.lang.reflect.InvocationTargetException

    如果项目的包名使用中文,会反射找不到,idea设置Editor->File Encodings 改utf-8试试

  4. C++ 字符串截取转换及字符流控制

    文章由来 ------------------工作需要缓冲区里的字符串控制,还是混合编译的那种,根据协议来定义截取各种字符流,控制大小长度,截取返回的内容然后转换成特定的类型, 可能表述不是那么正确, ...

  5. php图片无损压缩的问题解决

    代码如下 <?php namespace App\Contract; use Carbon\Carbon; /** * 图片压缩封装类 * @author jackie <2019.11. ...

  6. VIM的一些使用积累

    替换: :s/cst/dst/gc 黏贴后格式不对齐: gg=G 全选并黏贴 gg :"+yG

  7. 用 GetEnvironmentVariable 获取常用系统环境变量

    以前曾用 GetWindowsDirectory.GetSystemDirectory.GetTempPath 等函数获取系统常用文件夹; 也用过 SHGetSpecialFolderLocation ...

  8. js打印窗口内容并当窗口内容较长时自动分页

    项目环境Angular: 方法1.window.print() HTML页面上的代码: <div id="tenementBillTable" class="dia ...

  9. 耗时十个月的德国APS，教会我的学习方法

    考过了准备了10个月的Aps ,想送给关注我的8175个粉丝,一份礼物,感谢你们看的起我,对我的支持和关注. 这份礼物,我就大言不惭的称之为:达令的学习方法. 我的考试经历:高考两次,中戏艺考三试,导 ...

  10. 团队冲刺DAY6

    团队冲刺DAY6 今天的内容是无图形界面的客户端和服务器的加密解密系统. 通信时用的socket方法,内置的密钥,端口,ip地址. 客户端: import java.io.*; import java ...