默认状态下，灰色面板出现。当点击页面按钮以及灰色面板外区域时，面板消失;点击按钮，灰色面板出现;点击灰色面板区域，面板不能消失。

主要考察：事件冒泡与取消事件冒泡。

代码：

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>习题-仿select下拉框</title>

    <style>

        #div1 {

            width: 400px;

            height: 300px;

            background: #ccc;

        }

    </style>

</head>

<body>

    <input id='button' type='button' value='显示' />

    <div id='div1'></div>

    <script>

        //此处写代码

    </script>

</body>

</html>

参考代码：

        window.onload = function () {

            var oBtn = document.getElementById('button');

            var oDiv = document.getElementById('div1');

            oBtn.onclick = oDiv.onclick = function (ev) {

                var oEvent = ev || event;

                oDiv.style.display = 'block';

                oEvent.cancelBubble = true;

            }

            document.onclick = function () {

                oDiv.style.display = 'none';

            }

        }

　　

仿select下拉框的更多相关文章

  1. 事件冒泡 --- 仿select下拉框

    要求:点击按钮时,下拉框显示:点击页面其他部分时,下拉框消失: 1. 不靠谱代码 <!DOCTYPE html> <html> <head lang="en&q ...

  2. s:select下拉框validation验证

    S:select下拉框验证: <td colspan="5"> <s:select name="vo.typeVO.corp" list=&q ...

  3. 自定义样式的select下拉框深入探索

    第一个版本: 首先实现自定义select下拉框应该具有的功能,我是选择将原来的select隐藏掉,自己在jquery代码中动态写进去<dl><dd><dt>这样的结 ...

  4. jquery取消选择select下拉框

    有三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求有点儿.......... 下面是三个select: <select name=&q ...

  5. jquery选中将select下拉框中一项后赋值给text文本框

    jquery选中将select下拉框中一项后赋值给text文本框,出现无法将第一个下拉框的value赋值给文本框 因为select默认选中第一项..在选择第一项时,便导致无法激发onchange事件. ...

  6. js如何获取select下拉框的value以及文本内容

    select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛.但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的.其他的就不说了,现 ...

  7. css配合js模拟的select下拉框

    css配合js模拟的select下拉框 <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  8. select下拉框选择触发事件

    我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" ...

  9. JavaScript获取Select下拉框Option的Value和Text值的方法

    Js获取select下拉列表框各个Option的Value值相对比较容易,不过获取Text值却有点麻烦,对于一个初学JavaScript的 新手来说,可能一时还无从下手,那么就请看下本文的方法,以一个 ...

随机推荐

  1. K8S基础

    四组基本概念 Pod/Pod控制器 Name/Namespace Label/Label选择器 Service/Ingress Pod Pod是k8s里能够被运行的最小的逻辑单元(原子单元) 1个Po ...

  2. vue 组件的封装

    封装的原因 首先封装组件的需求肯定是多个地方要用到同一个东西,他们都有公共的地方,vue的封装 简单来说就是将公共参数封装起来 然后在需要的地方引入 //子组件封装 <template> ...

  3. MySQL【灵魂拷问】

    MySQL 一直是本人薄弱的部分,后面会多总结 MySQL 的文章,毕竟 MySQL 涉及到数据存储.锁.磁盘寻道.分页等操作系统概念,而且互联网对 MySQL 的注重程度是不言而喻的,后面要加紧对 ...

  4. Java 10 种常用第三方服务

    严格意义上说,所有软件的第三方服务都可以自己开发,不过从零到一是需要时间和金钱成本的.就像我们研发芯片,投入了巨大的成本,但仍然没有取得理想的成绩,有些事情并不是一朝一夕,投机取巧就能完成的. Jav ...

  5. MeteoInfoLab脚本示例：AVHRR HDF数据

    这里演示读取和绘制AVHRR hdf格式数据,以sst(海表面温度)为例. 脚本程序: #Add data file f = addfile('D:/Temp/hdf/2006001-2006005. ...

  6. 本地环境Django配置问题

    Django本地环境出现的问题 当你的前端出现这个问题的时候 你只需要吧setting.py 中的DEBUG 改为 True,即可 我原来是是DEBUG = False 本人亲测有用!!!

  7. lumen-ioc容器测试 (2)

    lumen-ioc容器测试 (1) lumen-ioc容器测试 (2) lumen-ioc容器测试 (3) lumen-ioc容器测试 (4) lumen-ioc容器测试 (5) lumen-ioc容 ...

  8. intellij idea:设置java方法注释模板(intellij idea 2019.2)

    一,打开方法注释模板的编辑窗口 菜单file->打开settings editor栏目下->打开Live Templates   说明:刘宏缔的架构森林是一个专注架构的博客,地址:http ...

  9. PHP获取当前毫秒级别时间戳

    PHP提供了一个microtime()函数,调用时不带可选参数,本函数以"msec sec"的格式返回一个字符串,其中 sec 是自 Unix 纪元(0:00:00 January ...

  10. HTML DOM Document的实际应用

    HTML文档中可以使用以下属性和方法: 属性 / 方法 描述 document.activeElement 返回当前获取焦点元素 document.addEventListener() 向文档添加句柄 ...