<!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,百度分享保持居中--下拉菜单 百度分享保持居中 效果图 html代码 <div id="share"> <h2>分享到</h2& ...

  3. 【JavaScript 11—应用总结】：下拉菜单

    导读:在web页面的显示中,总是免不了下拉菜单的设置.怎样将菜单设置的更好玩一点呢?这次,就将实现一个下拉菜单的制作.当鼠标移入的时候,菜单显示,鼠标移走,菜单关闭. 一.实现分析 首先,制作一个下拉 ...

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

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

  5. 第二百四十四节，Bootstrap下拉菜单和滚动监听插件

    Bootstrap下拉菜单和滚动监听插件 学习要点: 1.下拉菜单 2.滚动监听 本节课我们主要学习一下 Bootstrap 中的下拉菜单插件,这个插件在以组件的形式我们 已经学习过,那么现在来看看怎 ...

  6. JS 下拉菜单

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

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

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

  8. Bootstrap入门（十）组件4：按钮组与下拉菜单结合

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

  9. jquery 实现下拉菜单

    Jquery 是一个轻量的框架,个人认为非常好用,今天就写一个非常简单的例子,实现下拉菜单功能: 首先肯定要在页面引用jquery.js  版本不限 : 接下来把=================== ...

随机推荐

  1. Bellman_Ford

    Source:http://www.cnblogs.com/Jason-Damon/archive/2012/04/21/2460850.html 摘自百度百科 Bellman-ford算法是求含负权 ...

  2. iOS开发——UI进阶篇（六）键盘处理

    一.键盘通知我们经常需要在键盘弹出或者隐藏的时候做一些特定的操作,因此需要监听键盘的状态 键盘状态改变的时候,系统会发出一些特定的通知UIKeyboardWillShowNotification // ...

  3. BZOJ4514——[Sdoi2016]数字配对

    有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci×cj 的 ...

  4. 常用的Git Tips

    导读 Git被越来越多的公司使用,因此我们需要了解Git使用过程中的一些技巧. 一.Configuration:配置 列举所有的别名与配置 git config --list Git 别名配置 git ...

  5. 《C和指针（Pointer on c）》 学习笔记（转自：http://dsqiu.iteye.com/blog/1687944）

    首先本文是对参考中三个连接的博客进行的整理,非常感谢三位博主的努力,每次都感叹网友的力量实在太强大了…… 第一章 快速上手 1.  在C语言中用/*和*/来注释掉这段代码,这个实际上并不是十分的安全, ...

  6. ORA-02287: 此处不允许序号

    今天使用 insert into select 时出现了这个异常,感觉很诡异,去metalink查了下资料,找出了错误原因,记录下来. SQL> CREATE TABLE test_baser0 ...

  7. PHP中面相对象对象的知识点整理

    面向对象 万物皆对象,将构成问题的事务分解到各个对象上,建立对象的目的不是为了完成一个工作,而是为了描述某个事务在解决问题中的行为,更符合人的思维习惯,代码重用性高,可扩展性. ___________ ...

  8. BZOJ 1511: [POI2006]OKR-Periods of Words

    Description 求一个最长周期. Sol KMP. 一个点的最短周期就是 \(i-next[i]\) 此外 \(i-next[next[i]],i-next[next[next[i]]]\) ...

  9. Redis常用数据类型介绍、使用场景及其操作命令

    Redis常用数据类型介绍.使用场景及其操作命令 本文章同时也在cpper.info发布. Redis目前支持5种数据类型,分别是: 1.String(字符串) 2.List(列表) 3.Hash(字 ...

  10. ios 在storyboard 和 xib中，显示自定义view的预览效果

    发现FSCalendar这个控件能在xib中显示预览效果,是怎么实现的呢?其中涉及的知识又有哪些? 主要就是IBInspectable 和 IB_DESIGNABLE 先看 IBInspectable ...