div展开与收起（鼠标点击）
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>展开与收起</title>
<style type="text/css">
body{
margin: 0 auto;
padding: 0;
}
#pn{
background: #e8e8e8;
width: 600px;
display: block;
margin: 0 auto;
padding: 5px;
font-size: 9pt;
height: auto;
}
.slide{
margin: 0 auto;
padding: 0;
width: 600px;
border-top: 4px solid gray;
}
.btn-slide{
background: gray;
width:120px;
height: 30px;
text-align: center;
margin: 0 auto;
display: block;
color: #fff;
text-decoration: none;
padding-top: 10px;
}
</style>
<script type="text/javascript">
function showdiv(){
document.getElementById("hpn").style.display="block";
document.getElementById("strHref").innerHTML="收起-";
document.getElementById("strHref").href="javascript:hidediv()";
}
function hidediv(){
document.getElementById("hpn").style.display="none";
document.getElementById("strHref").innerHTML="更多选项+";
document.getElementById("strHref").href="javascript:showdiv()";
}
</script>
</head>
<body>
<div id="pn">
<p>手机商品筛选</p>
<p>网络：移动 联通 电信</p>
<div id="hpn" style="display:none">
<p>价格：5000以上 4000-4999 3000-3999</p>
<p>特点：JDPhone计划‘0’元购机 放水</p>
</div>
</div>
<p class="slide">
<a href="javascript:showdiv();" id="strHref" class="btn-slide">更多选项+</a>
</p>
</body>
</html>
div展开与收起（鼠标点击）的更多相关文章
- 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏
function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...
- js 点击展开、收起
//点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...
- Vue:列表展开和收起（超过一定行数时显示‘查看更多’按钮）
前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行 ...
- JS控制鼠标点击事件
鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...
- 【Android】键盘的展开和收起
键盘的展开和收起主要使用到类InputMethodManager:http://developer.android.com/reference/android/view/inputmethod/Inp ...
- css禁用鼠标点击事件
css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- UITableView多层展开与收起
规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展 ...
- 长图的展开与收起（Android）
前言: 在app的文章中,经常会夹杂着一些特别长的长图.在阅读的时候需要滑动很久才能看图片下方的文字,因此对于长图只展示图片上面一部分,并且可以展开这个功能是很重要的. 效果: 基本思路: 利用sca ...
随机推荐
- WorkerMan 入门学习之（二）基础教程-Connection类的使用
一.TcpConnection类 的使用 1.简单的TCP测试 Server.php <?php require_once __DIR__.'/Workerman/Autoloader.php' ...
- 使用bootstrap的相关配置
<html> <head> <title>java微辅导</title> <meta charset="UTF-8"/> ...
- .Net进阶系列(14)-异步多线程(async和await)（被替换）
1. 方法名前只有async,但是方法中Task实例前没有await关键字,该方法和普通方法没有什么区别,但是会报一个警告. #region 情况一 /// <summary> /// ...
- Python中变量的属性以及判断方法
1.变量的属性 在Python中,创建一个变量会给这个变量分配三种属性: id ,代表该变量在内存中的地址: type,代表该变量的类型: value,该变量的值: x = 10 print(id(x ...
- [iOS]App上架流程[利用Archive进行上传]
今天给大家带来项目如何上架的教程 准备: 1. 一个开发者账号(需要交过钱的,
- java 多线程断点下载功能
import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import java.io.Rand ...
- 复习python
1当命令行键入python a.py的方式运行python程序时候,a.py不需要执行权,当已./a.py运行时,需要执行权 2.与c语言不同的地方 i = 3 print (i)#合法 #在pyth ...
- PHP - CentOS下开发运行环境搭建（Apache+PHP+MySQL+FTP）
本文介绍如何在 Linux下搭建一个 PHP 环境.其中 Linux 系统使用是 CentOS 7.3,部署在阿里云服务器上. 1,连接登录服务器 拿到服务器的 ip.初始密码以后.我们先通过远程 ...
- ubuntu14.04 提示 卷 文件系统根目录 仅剩余xxx的硬盘空间
- gunicorn+flask使用与配置
gun.conf的内容 import os bind = '10.1.240.222:5000' workers = 4 backlog = 2048 worker_class = "syn ...