二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单 

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <!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;
            background: url(xjt.png) no-repeat right center;
        }
        
        #divselect ul {
            width: 184px;
            border: 1px solid #333333;
            background-color: #ffffff;
            position: absolute;
            z-index: 20000;
            margin-top: -1px;
            display: none;
        }
        
        #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;

            // 点击三角时
            title.onclick = function(event) {
                event = event || window.event;
                menu.style.display = 'block';
                if (event.stopPropagation) {
                    event.stopPropagation();
                } else {
                    event.cancelBubble = true;
                }
                document.onkeyup = function(event) {
                    event = event || window.event;
                    if (event.keyCode == 40) {
                        index++;
                        if (index >= as.length) index = 0;
                        for (var i = 0; i < as.length; i++) {
                            as[i].style.background = '#fff';
                        }
                        as[index].style.background = '#ccc';
                    }
                    if (event.keyCode == 38) {
                        index--;
                        if (index < 0) index = as.length - 1;
                        for (var i = 0; i < as.length; i++) {
                            as[i].style.background = '#fff';
                        }
                        as[index].style.background = '#ccc';
                    }
                    if (event.keyCode == 13) {
                        for (var i = 0; i < as.length; i++) {
                            as[i].style.background = '#fff';
                        }
                        title.innerHTML = as[index].innerHTML;
                        menu.style.display = 'none';
                    }
                }
            }

            // 滑过滑过、离开、点击每个选项时
            for (var i = 0; i < as.length; i++) {
                as[i].num = i
                as[i].onmouseover = function() {
                    this.style.background = '#ccc'
                    index = as[i].num - 1;
                }
                as[i].onmouseout = function() {
                    this.style.background = '#fff'
                }
                as[i].onclick = function(event) {
                    event = event || window.event;
                    if (event.stopPropagation) {
                        event.stopPropagation();
                    } else {
                        event.cancelBubble = true;
                    }
                    menu.style.display = 'none';
                    title.innerHTML = this.innerHTML;
                }
            }

            // 点击页面空白处时
            document.onclick = function() {
                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>
    </body>

    </html>
</body>

</html>

 

posted @ 2015-10-19 09:53  姜腾腾  阅读(197)  评论(0)    收藏  举报