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

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

代码：

<!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. MeteoInfo脚本示例：GrADS to netCDF

    这里给出一个将GrADS数据文件转为netCDF数据文件的脚本示例程序,其它格式数据转netCDF可以参考: #-------------------------------------------- ...

  2. 第4天 | 12天搞定Python，基础语法(下)

    为了方便你的学习,减轻负重,我特意将基础语法分成上下两部分.希望你喜欢这种方式,如果不喜欢,你可以跟我说,反正我是不会改的,哈哈~~. 如果上部分,你还没看的话,先去看<第4天 | 12天搞定P ...

  3. pytest文档33-Hooks函数获取用例执行结果(pytest_runtest_makereport)

    前言 pytest提供的很多钩子(Hooks)方法方便我们对测试用例框架进行二次开发,可以根据自己的需求进行改造. 先学习下pytest_runtest_makereport这个钩子方法,可以更清晰的 ...

  4. zookeeper在生产环境中的配置(zookeeper3.6)

    一,zookeeper中日志的配置 1,快照文件snapshot的目录: dataDir=/data/zookeeper/data 存储快照文件snapshot的目录.默认情况下,事务日志也会存储在这 ...

  5. java内存模型深入理解

    作为一个java程序员 jvm 虚拟机应该是最先接触的了,但是当初由于理解能力有限一直没搞明白是怎么回事,而是将他理解为运行java程序的环境,不过这也没错.但是随着工作时间的增加开始思考jvm里面工 ...

  6. C++ 多线程 std::thread 使用总结

    在C++ 11之前,官方并没有支持线程库.C++ 11通过标准库引入了对 thread 类的支持,大大方便了完成多线程开发的工作. std::thread 构造函数  (1)thread() noex ...

  7. 联赛模拟测试20 C. Weed

    题目描述 \(duyege\) 的电脑上面已经长草了,经过辨认上面有金坷垃的痕迹. 为了查出真相,\(duyege\) 准备修好电脑之后再进行一次金坷垃的模拟实验. 电脑上面有若干层金坷垃,每次只能在 ...

  8. 解谜：为何用了9-Patch背景图后自带Padding属性？

    本次分享的主题源于笔者在实际开发中遇到的问题. 具体现象为:当普通的9-Patch图用作TextView的backGround属性后,整个TextView便有了一定的Padding值.但笔者并没有给定 ...

  9. 阿里云MNS官方PHP版SDK缺少message tag问题处理

    最近在使用阿里云MNS官方PHP版SDK的过程中,发现发送到topic的消息,不能设置tag(其它语言版本SDK支持tag,如java,python),但在阿里云控制台页面发送是可以设置tag的. 因 ...

  10. Moment.js常见用法总结

    Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. ​ 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...