<!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>

二、JavaScript语言--事件处理--DOM事件探秘--下拉菜单的更多相关文章

  1. 二、JavaScript语言--事件处理--DOM事件探秘

    第一章 事件流 事件:是文档或浏览器窗口中发生的.特定的交互瞬间.JavaScript和HTML之间的交互都是通过事件来实现的. 事件流:描述的是从页面中接受事件的顺序 IE:事件冒泡流 Netsca ...

  2. 第一百三十二节,JavaScript,封装库--下拉菜单

    JavaScript,封装库--下拉菜单 封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) ...

  3. JS 下拉菜单

    HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  4. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

  5. Bootstrap入门(十)组件4:按钮组与下拉菜单结合

    Bootstrap入门(十)组件4:按钮组与下拉菜单结合   先引入本地的CSS文件和JS文件(注:1.bootstrap是需要jQuery支持的.2.需要在<body>当中添加) < ...

  6. DOM事件探秘

    说到DOM事件,就不得不说以下几点: 1 事件流 事件流:描述的是从页面中接受事件的顺序 事件流分为事件冒泡流和事件捕获流.那么什么是事件冒泡,什么是事件捕获呢? 事件冒泡:即事件最开始由最具体的元素 ...

  7. JavaScript 多级联动浮动(下拉)菜单 (第二版)

    JavaScript 多级联动浮动(下拉)菜单 (第二版)   上一个版本(第一版请看这里)基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高.这次除了修改已发现的问 ...

  8. (JavaScript插件——下拉菜单)

    前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html 本文主要来学习一下JavaScrip ...

  9. Bootstrap &lt;基础十二&gt;下拉菜单(Dropdowns)

    Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 ...

随机推荐

  1. selenium+testng+ant+jenkins 手记

    会不会搭建测试平台是一般测试工程师和高级测试工程师分水岭 ----tobecrazy 我们项目有现成的测试平台,使用的是selenium grid+testng+ant+jenkins+VM 但是我平 ...

  2. codeforces 645 E. Intellectual Inquiry

    一个字符串,由前k个字母组成,长度为m + n,其中前m个字符已经确定,后面n个由你自由选择, 使得这个串的不同的子序列的个数最多,空串也算一个子序列. 1 <= m <= 10^6,0 ...

  3. JAVA-系统-【2】-创建自增长的用户表

    [2]创建数据库表  用户表 自增 1.用户表结构  数据excel 表1 2.创建表 Create table A_USER( id number primary key, username ) n ...

  4. Res_Orders_02

    一.燃尽图展示 二.项目进展 1.实现用户名找回 2.css样式嵌入

  5. Python Charts库的使用

    博客园格式不太好看,可以去本人CSDN博客 http://blog.csdn.net/ashic/article/details/52598664 http://nbviewer.jupyter.or ...

  6. Intense Images – 全屏浏览图像的 JS 插件

    Intense Images 是一个独立的 JavaScript 库,用于查看全屏图像.使用触摸/鼠标来实现图片位置的平移.图像元素的所有样式都是可以自定义的,Intense.js 只处理图像浏览器和 ...

  7. 访问修饰符(public,private,protected,internal,sealed,abstract)

    为了控件C#中的对象的访问权限,定义对象时可以在前面添加修饰符. 修饰符有五种:private(私有的),protected(受保护的),internal(程序集内部的),public(公开的),以及 ...

  8. V for Vendetta

    V for Vendetta V字仇杀队 复仇者V 安迪·沃卓斯基 and Larry Wachowski 思想,是最强大的武器.因为,世界上的独裁政府,有一个共同特点就是推行洗脑和愚民政策. 经典台 ...

  9. shell字符串判空

    主要用到两个命令 -n  -z if [ -n "$PID" ]; then echo "PID is not empty" fi if[ -z "$ ...

  10. JavaScript的事件代理(转)

    如果你想给网页添加点JavaScript的交互性,也许你已经听过JavaScript的事件代理(event delegation),并且觉得这是那些发烧友级别的JavaScript程序员才会关心的什么 ...