效果图：

<!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展开与收起（鼠标点击）的更多相关文章

  1. 工作当中实际运用（3）——js原生实现鼠标点击弹出div层 在点击隐藏

    function onmou(){ var divs=document.getElementById('kefuDV');//获取到你要操作的div if (divs.style.display==& ...

  2. js 点击展开、收起

    //点击展开.收起 window.onload=function(){ var current=document.getElementsByTagName('li')[0]; document.bod ...

  3. Vue:列表展开和收起（超过一定行数时显示‘查看更多’按钮）

    前言:前端小白记录的一些小功能~ 公司开发中的小程序中有做任务签到的功能,这就涉及到了任务列表以及对任务列表的展开和收起功能,好了可以开始了,说多了就烦了 1.首先是css样式,因为设计稿上是超过两行 ...

  4. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  5. 【Android】键盘的展开和收起

    键盘的展开和收起主要使用到类InputMethodManager:http://developer.android.com/reference/android/view/inputmethod/Inp ...

  6. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

  7. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  8. UITableView多层展开与收起

    规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展 ...

  9. 长图的展开与收起（Android）

    前言: 在app的文章中,经常会夹杂着一些特别长的长图.在阅读的时候需要滑动很久才能看图片下方的文字,因此对于长图只展示图片上面一部分,并且可以展开这个功能是很重要的. 效果: 基本思路: 利用sca ...

随机推荐

  1. RocketMQ在windows环境下的安装

    原博地址:https://www.jianshu.com/p/4a275e779afa 一.预备环境 1.系统 Windows 2. 环境 JDK1.8.Maven.Git 二. RocketMQ部署 ...

  2. JAVA记录-Mybatis介绍

    1.什么是 MyBatis ? MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyB ...

  3. epoll讲解--转自知乎

    Ctrip AIO底层使用epoll https://blog.csdn.net/z69183787/article/details/52943637 首先我们来定义流的概念,一个流可以是文件,soc ...

  4. Python基础-day02

    写在前面 上课第二天,打卡: 大人不华,君子务实. 一.进制相关 - 进制基础 数据存储在磁盘上或者内存中,都是以0.1形式存在的:即是以 二进制 的形式存在: 为了存储和展示,人们陆续扩展了数据的表 ...

  5. .NET面试题系列（十一）WinDbg、Perfmon

    WinDbg 资料 https://www.cnblogs.com/sheng-jie/p/9503650.html https://www.cnblogs.com/yudongdong/p/9701 ...

  6. Java图片比对

    在自动化测试中,除了普通的值验证,经常还有一些图片验证,比如图片的匹配率,输出图片的差异图片等.本文主要用到了BufferedImage类来操作图片比对和输出差异图片,大体的思路如下: 1. 通过Im ...

  7. Java中BIO、NIO、AIO的区别和应用场景

    学习IO,首先要明白四个东西. 1.同步            java自己去处理io. 2.异步          java将io交给操作系统去处理,告诉缓存区大小,处理完成回调. 3.阻塞     ...

  8. 使用PLC作为payload/shellcode分发系统

    这个周末,我一直在鼓捣Modbus,并利用汇编语言开发了一个stager,它可以从PLC的保持寄存器中下载payload.由于有大量的PLC都暴露在互联网上,我情不自禁地想到,是否可以利用它们提供的处 ...

  9. POJ3304 Segments 【线段直线相交】

    题意: 给出n条线段两个端点的坐标,问所有线段投影到一条直线上,如果这些所有投影至少相交于一点就输出Yes!,否则输出No!. 思路: 计算几何.这道题要思考到两点: 1:把问题转化为是否存在一条直线 ...

  10. POJ3233 Matrix Power Series（快速幂求等比矩阵和）

    题面 \(solution:\) 首先,如果题目只要我们求\(A^K\) 那这一题我们可以直接模版矩乘快速幂来做,但是它现在让我们求$\sum_{i=1}^{k}{(A^i)} $ 所以我们思考一下这 ...