<!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. 使用IzPack打包JAVA Web应用程序

    使用IzPack打包JAVA Web应用程序步骤如下: 这里使用IzPack-4.3.5 + launch4j-3.1.0-beta1-win32.zip(绿色版)对Web应用程序打包,打包后即可对我 ...

  2. 实操UNITY3D接入91SDK安卓版

    原地址:http://bbs.18183.com/thread-149758-1-1.html 本文内容为创建UNITY3D接入91SDK的DEMO的具体操作过程.本人水平有限,UNITY3D与And ...

  3. Android圆角矩形创建工具RoundRect类

    用于把普通图片转换为圆角图像的工具类RoundRect类(复制即可使用): import android.content.Context; import android.graphics.Bitmap ...

  4. qt-5.6.0 移植之纯净的linux文件系统的建立

    为什么要建立一个最纯净的文件系统,一开始是想在qt-4.8.5的文件系统基础之上加东西,慎重想了一下,这方法行不通,以为有很多东西不熟悉.干脆就自己建立一个. 步骤很简单: 一:下载一个bulidro ...

  5. 2016年10月31日--网页 Windows对象操作

    Window.opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null. Window.open(URL,name,features,replace):open ...

  6. django缓存

    由于Django是动态网站,所有每次请求均会去数据进行相应的操作,当程序访问量大时,耗时必然会更加明显,最简单解决方式是使用:缓存,缓存将一个某个views的返回值保存至内存或者memcache中,5 ...

  7. java.lang.ClassNotFoundException: net.sf.json.JSONArray,java.lang.NoClassDefFoundError: net/sf/json/JSONArray jetty跑项目遇到的问题

    2016-05-18 15:44:25 ERROR Dispatcher.error[user:|url:]:L38 - Dispatcher initialization failed Unable ...

  8. Ubuntu 15.10下droidbox安装使用

    DroidBox是一个动态分析Android代码的的分析工具.其目前的安装环境为:Linux/Unix/MacOSX 下面是安装步骤 一. 安装Android SDK 并添加环境变量 export P ...

  9. SqlBulkCopy 批量复制数据到数据表

    使用 SqlBulkCopy 类只能向 SQL Server 表写入数据.但是,数据源不限于 SQL Server:可以使用任何数据源,只要数据可加载到 DataTable 实例或可使用 IDataR ...

  10. WCF 定制自己的签名验证逻辑

    关键点: 1. 保证在客户端设置签名. client.ClientCredentials.ClientCertificate.SetCertificate(StoreLocation.CurrentU ...