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

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

代码：

<!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. 第3天 | 12天搞定Python，用PyCharm编写代码

    有了运行环境还不够,在程序的江湖里,还得有一把趁手的"兵器". 工欲善其事,必先利其器,在进行Python开发时,可选择 IDE挺多的,其中,以PyCharm. Eclipse+P ...

  2. Java 8 有多牛逼？打破一切你对接口的认知！

    前段时间面试了一个 39 岁的程序员,结果不是很理想,没看过的点击这里阅读. 最近也面试一些 Java 程序员,不乏工作 4.5 年经验的,当我问他一些 Java 8 的新特性时,大多却答不上来. 比 ...

  3. 多测师讲解自动化测试 _RF连接数据库_高级讲师肖sir

    RF连接数据库:1.Connect To Database(连接数据库)2.Table Must Exist(表必须存在)3.Check If Exists In Database(查询某条件是否存在 ...

  4. 【手摸手，带你搭建前后端分离商城系统】02 VUE-CLI 脚手架生成基本项目，axios配置请求、解决跨域问题

    [手摸手,带你搭建前后端分离商城系统]02 VUE-CLI 脚手架生成基本项目,axios配置请求.解决跨域问题. 回顾一下上一节我们学习到的内容.已经将一个 usm_admin 后台用户 表的基本增 ...

  5. day01 Pyhton学习

    一.python介绍 python是一种解释型.弱类型的高级编程语言. 编译型:是把源程序的每一条语言编译成机器语言,并保存成二进制文件,给计算机执行,运算速度快. 优点:程序执行效率高,可以脱离语言 ...

  6. nginx安全:修改对外的服务软件名称并隐藏版本号(nginx1.18.0)

    一,为什么要隐藏nginx真实的软件名称? 1,nginx响应的Server头部都会携带上服务软件的名字和版本信息, 服务器软件的版本信息暴光在外部,很容易被黑客了解到,就通过相应版本的漏洞来攻击服务 ...

  7. Jmeter入门（3）- Jmeter录制脚本

    一. 录制web端 1. Badboy的介绍和安装 1.1 使用第三方工具Badboy来录制. 免费的web自动化测试工具 一个浏览器模拟工具 主要进行脚本的录制和回访,和对录制脚本进行调试,可以将脚 ...

  8. 微信小程序-基于高德地图API实现天气组件(动态效果)

    微信小程序-基于高德地图API实现天气组件(动态效果) ​ 在社区翻腾了许久,没有找到合适的天气插件.迫不得已,只好借鉴互联网上的web项目,手动迁移到小程序中使用.现在分享到互联网社区中,帮助后续有 ...

  9. Nacos注册中心使用

    创建两个工程,一个是nacos-provider, 另一个是naocos-consumer: 添加nacos-provider的依赖 <parent> <groupId>org ...

  10. etc/river.toml

    # MySQL address, user and password # user must have replication privilege in MySQL. my_addr = " ...