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

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

代码：

<!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. lua 1.0 源码分析 -- 1 lua 的虚拟指令

    lua的解释器拿到 lua 编写的源码,首先进行解析,就是进行词法分析和语法分析,将源码转换成 lua 的指令集,然后执行这个指令集. lua 源码: function f(val) return v ...

  2. mysql DISTINCT选取多个字段，获取distinct后的行信息

    背景:      a表保存关联关系,通过ACode 获取该关系中的所有 BCode, 并获取所有Bcode-max(Bvrsn)的信息  Bnm 表a 表b          循序渐进:        ...

  3. SpringBoot整合Mybatis 编译失败：找不到符号 程序包不存在

    问题描述:jpa不好用,转用mybatis,配置多数据源  但是配置后无法编译mvn clean install  dao层这些报错,找不到entity的包     问题解决:罪魁祸首:热部署的部分 ...

  4. Linux就该这么学28期——Day05 vim编辑器与Shell命令脚本 （yum配置 网卡配置）

    vim 三种模式: 命令模式 按行操作 dd 剪切.删除 5dd dG   全删 yy 复制光标所在行 p 粘贴 u 撤销操作 / 搜索 /ab n  下一个 N   上一个 输入模式 a 当前光标处 ...

  5. mysql间隙锁 转

    前面一文 mysql锁 介绍了mysql innodb存储引擎的各种锁,本文介绍一下innodb存储引擎的间隙锁,就以下问题展开讨论 1.什么是间隙锁?间隙锁是怎样产生的? 2.间隙锁有什么作用? 3 ...

  6. linux(centos8):kubeadm单机安装kubernetes（kubernetes 1.18.3）

    一,kubernetes安装的准备工作: 1,准备工作的各步骤请参见: https://www.cnblogs.com/architectforest/p/13141743.html   2,  ma ...

  7. 洛谷 P6602 数轴

    时光倒流+暴力+尺取 第一次看到这题,是在神子杏的课堂上 这就是一个裸的双指针,洛咕上多倍经验的题太多了. --神子杏 那好,我们就用双指针来考虑这道题. 首先可以发现 答案区间$ (l,r) $ 一 ...

  8. 修改apt，pip，npm为国内镜像源

    apt 原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 编辑源列表文件 sudo vim /etc/apt/sources. ...

  9. BeanCopier的使用

    BeanCopier进行的是bean之间的copy,从一个类到另一个类,进行属性值的拷贝. 成功copy的条件: 1.属性的类型和名称都相同 2.目标类的setter缺少或缺失会导致拷贝失败,名称相同 ...

  10. Linux入门到放弃之六《磁盘和文件系统管理三》

    设置磁盘配额 对之前创建的逻辑卷设置磁盘配额,要求用户student对该逻辑卷 容量的软限制是:5G,硬限制是7G,文件个数软限制为:25个,硬限制为30个. (1)首先对/etc/fstab文件进行 ...