<!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. firefox 使用svg的image标签无法显示图片

    在image标签上添加 height.width(不要用css属性) href属性前面加xlink: (Mozilla自己的MDN都说不加xlink了,搞鸡巴)

  2. 浅析MVC模式与三层架构的区别01

    三层架构和MVC是有明显区别的,MVC应该是展现模式(三个加起来以后才是三层架构中的UI层)三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为:表现层(UI ...

  3. PHP 线程安全与非线程安全版本的区别深入解析

    Windows版的PHP从版本5.2.1开始有Thread Safe(线程安全)和None Thread Safe(NTS,非线程安全)之分,这两者不同在于何处?到底应该用哪种?这里做一个简单的介绍 ...

  4. ASP代码审计 -4.命令执行漏洞总结

    命令执行漏洞: 保存为cmd.asp,提交链接: http://localhost/cmd.asp?ip=127.0.0.1 即可执行命令 <%ip=request("ip" ...

  5. Winform开发框架之客户关系管理系统(CRM)的开发总结系列2-基于框架的开发过程

    在上篇随笔<Winform开发框架之客户关系管理系统(CRM)的开发总结系列1-界面功能展示>中介绍了我的整个CRM系统的概貌,本篇继续本系列的文章,介绍如何基于我的<winform ...

  6. 转(linux shell)(2)

      http://oldboy.blog.51cto.com/2561410/1665163 1.按单词出现频率降序排序! 2.按字母出现频率降序排序! the squid project provi ...

  7. POJ 2983 Is the Information Reliable? 信息可靠吗 (差分约束,spfa)

    题意:有n个站排成一列,针对每个站的位置与距离关系,现有多个约束条件,约束条件分两种:(1)确定的.明确说明站a距离站b多少个单位距离.(2)不确定的.只知道a在b的左边至少1个单位距离.  根据已知 ...

  8. 【BZOJ 1015】[JSOI2008]星球大战starwar

    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...

  9. Layout Resource官方教程(3)在layout中用include嵌入其它layout

    简介 <include>Includes a layout file into this layout. 类似 #include ,把layout展开在include处 attribute ...

  10. 不要直接对Request.Headers[&quot;If-Modified-Since&quot;]使用Convert.ToDateTime

    不要直接对Request.Headers["If-Modified-Since"]使用Convert.ToDateTime 前一段时间图片处理服务一直报“System.Format ...