首页 > 其他 > 详细

仿select下拉框

时间:2019-07-02 14:01:56      阅读:103      评论:0      收藏:0      [点我收藏+]

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

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

技术分享图片

代码:

<!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下拉框

原文:https://www.cnblogs.com/f6056/p/11119984.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!