DOM 事件下拉菜单实例

实现下图所示的菜单效果，实现点击菜单中的向下三角展开菜单，点击页面空白处收起菜单，按下键盘上的向上、向下方向键可以选中对应的选项，鼠标点击或按下回车键将当前高亮的选项内容设为菜单的标题

这里写图片描述

任务
一、点击菜单中的向下三角展开菜单

提示:
点击三角时需阻止事件冒泡

二、展开菜单之后，在document对象上绑定keyup事件,按下向下方向键，选中下一个选项，按下向上方向键，选中上一个选项，按下回车键菜单收起，显示选中项

提示:
1、声明一个全局的index变量初值为-1
2、按下向下方向键时index递增，当递增至大于等于菜单选项的总数时恢复为0
3、按下向上方向键时判断index，如若小于等于0则设为菜单选项的总数，之后递减index
4、根据index值将对应的选项设为当前（灰色背景）
5、按下回车键时将对应选中的选项设为菜单标题，且将所有选项设为无背景，index恢复为-1，菜单收起
注意：没有任何选项被选中时，按下回车键不做任何操作

三、鼠标滑过每个选项时高亮显示，离开时去掉背景，点击高亮选项时菜单标题改变

提示:
遍历所有a标签，绑定鼠标点击的事件
注意：要考虑到浏览器兼容，使用innerHTML，不要使用innerText

四、点击页面空白处收起菜单

提示: 绑定在document对象上

【代码】

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>下拉菜单</title>
    <style type="text/css">
    body,
    ul,
    li {
        margin: 0;
        padding: 0;
        font-size: 13px;
    }   
    ul,
    li {
        list-style: none;
    }   
    #divselect {
        width: 186px;
        margin: 80px auto;
        position: relative;
        z-index: 10000;
    }   
    #divselect cite {
        width: 150px;
        height: 24px;
        line-height: 24px;
        display: block;
        color: #807a62;
        cursor: pointer;
        font-style: normal;
        padding-left: 4px;
        padding-right: 30px;
        border: 1px solid #333333;
    }  
    cite:before {
        content: '';
        position: absolute;
        right: 7px;
        bottom: 7px;
        width: 0;
        height: 0;
        border-width: 4px;
        border-style: solid;
        border-color: #888 transparent transparent transparent;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -o-transition: all 0.2s;
        -ms-transition: all 0.2s;
        transform-origin: 50% 25%;
        -ms-transform-origin: 50% 25%;
        -moz-transform-origin: 50% 25%;
        -webkit-transform-origin: 50% 25%;
        -o-transform-origin: 50% 25%;
    }

    .extended cite:before {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
    }

    #divselect ul {
        width: 184px;
        border: 1px solid #333333;
        background-color: #ffffff;
        position: absolute;
        z-index: 20000;
        margin-top: -1px;
        display: none;
        overflow: hidden;
    }

    #divselect ul li {
        height: 24px;
        line-height: 24px;
    }

    #divselect ul li a {
        display: block;
        height: 24px;
        color: #333333;
        text-decoration: none;
        padding-left: 10px;
        padding-right: 10px;
    }
    </style>
    <script type="text/javascript">
    window.onload = function() {
        var box = document.getElementById('divselect'),
            title = box.getElementsByTagName('cite')[0],
            menu = box.getElementsByTagName('ul')[0],
            as = box.getElementsByTagName('a'),
            index = -1;
        var asLen = as.length;


        // 点击三角时
        title.onclick = function(event) {

            // 执行脚本
            menu.style.display = 'block';
            event.stopPropagation();
            document.onkeyup = function(event) {
                event = event || window.event;
                var keyCode = event.keyCode;
                if (event.keyCode === 40) {
                    if (index < asLen - 1) {
                        index++;
                        for (var i = 0; i < asLen; i++) {
                            as[i].style.background = '#fff';
                        }
                        as[index].style.background = '#ccc';
                    } else {
                        index = 0;
                        for (var i = 0; i < asLen; i++) {
                            as[i].style.background = '#fff';
                        }
                        as[index].style.background = "#ccc";
                    }
                } else if (keyCode === 38) {
                    if (index > 0) {
                        for (var i = 0; i < asLen; i++) {
                            as[i].style.background = '#fff';
                        }
                        index--;
                        as[index].style.background = "#ccc";
                    } else {
                        for (var i = 0; i < asLen; i++) {
                            as[i].style.background = '#fff';
                        }
                        index = asLen - 1;
                        as[index].style.background = "#ccc";
                    }
                } else if (keyCode === 13) {
                    var aHtml = as[index].innerHTML;
                    if (index != -1) {
                        title.innerHTML = aHtml;
                        for (var i = 0; i < asLen; i++) {
                            as[i].style.background = '#fff';
                        }
                        menu.style.display = 'none';
                    }
                }
            }
        }

        // 滑过滑过、离开、点击每个选项时
        // 执行脚本
        for (var j = 0; j < asLen; j++) {
            as[j].onmouseover = function() {
                for (var i = 0; i < asLen; i++) {
                    as[i].style.background = '#fff';
                }
                this.style.background = '#ccc';
            }
            as[j].onclick = function() {
                title.innerHTML = this.innerHTML;
                for (var i = 0; i < asLen; i++) {
                    as[i].style.background = '#fff';
                }
            }
        }
        // 点击页面空白处时
        // 执行脚本
        document.onclick = function(event) {
            menu.style.display = 'none';

        }

    }
    </script>
</head>

<body>
    <div id="divselect">
        <cite>请选择分类</cite>
        <ul>
            <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
            <li><a href="javascript:;" selectid="2">.NET开发</a></li>
            <li><a href="javascript:;" selectid="3">PHP开发</a></li>
            <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
            <li><a href="javascript:;" selectid="5">Java特效(什么鬼)</a></li>
        </ul>
    </div>
    <script type="text/javascript">
    window.onblur = function() {
        document.title = '(●—●)';
    };
    window.onfocus = function() {
        document.title = "下拉菜单";
    };
    </script>
</body>

</html>

原文链接：https://blog.csdn.net/sofia92/article/details/50537239