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

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

代码：

<!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. [转载]volitale关键字详解

    来看这个代码: int fun(int& a) { int b = a; int c = a; return a+b+c; } int main() { int a=1; //........ ...

  2. synchronized、volatile区别、synchronized锁粒度、模拟死锁场景、原子性与可见性

    synchronized.volatile区别.synchronized锁粒度 synchronized synchronized是Java中的关键字,是一种同步锁.有以下几种用法: 用法 1.修饰方 ...

  3. day57 Pyhton 前端Jquery09

    内容回顾: - 筛选选择器 $('li:eq(1)')  查找匹配的元素 $('li:first') $('li:last') - 属性选择器 - 筛选的方法 - find()  查找后代的元素 - ...

  4. linux mount挂载命令

    [root@localhost src]# mount 查询系统中已经挂载的设备 [root@localhost src]# mount -a 依据配置文件 /etc/fstab的内容,自动挂载

  5. 通过SQL自动添加流水号

    通过SQL自动添加流水号 项目中往往有一些单据流水号或者流程流水号是希望通过新增一条记录后自动产生一个编号的,比如新增一条流程就自动根据当前日期自动添加该流程的流程流水号,下面介绍两种不同类型流水号通 ...

  6. Linux用户和组管理命令-用户创建useradd

    用户管理命令 useradd usermod userdel 组帐号维护命令 groupadd groupmod groupdel 用户创建 useradd 命令可以创建新的Linux用户 格式: u ...

  7. git常见操作和指令

    1.指令集 1.1 本地与远程操作 创建文件 echo > README.md(文件名) 创建文件时输入信息 echo "(message)" >> README ...

  8. LeetCode 45跳跃游戏&46全排列

    原创公众号:bigsai,回复进群加入力扣打卡群. 昨日打卡:LeetCode 42字符串相乘&43通配符匹配 跳跃游戏 题目描述: 给定一个非负整数数组,你最初位于数组的第一个位置. 数组中 ...

  9. 群晖DS218+做maven私服(nexus3)

    欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...

  10. nginx处理vue打包文件后的跨域问题

    起因 在vue文件打包后,项目脱离了vue配置的反向代理配置,还是会报跨域的错误,或者直接打不开本地文件, 但是此刻我们想打开打包后的文件,测试一下文件有没有错误,因为经常会存在开发阶段没有问题,打包 ...