<!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,封装库--下拉菜单

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

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

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

  5. JS 下拉菜单

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

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

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

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

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

  8. jquery 实现下拉菜单

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

  9. 针对angularjs下拉菜单第一个为空白问题处理

          angularjs 的select的option是通过循环造成的,循环的方式可能有  ng-option  或 者 <option  ng-repeat></option ...

随机推荐

  1. 【转载总结】jQuery和HTML5全屏焦点图

    选项设置与说明 Slider Revolution提供了很多参数选项设置: delay: 滑动内容停留时间.默认9000毫秒 startheight: 滑动内容高度,默认490像素. startwid ...

  2. textarea关于空格和换行那点事

    textarea中空格连续输入多个的情况下,数据回显的时候页面只是显示一个:换行同样有问题,在textarea中有换行,在页面上却没有,今天终于看到个写的比较具体的文章,拿过来收藏下. 地址链接: h ...

  3. AIDL与service

    Service:Local service,一个进程中的多线程服务. AIDL:remote service,不同进程间通信. Service启动方法: startService():调用方destr ...

  4. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  5. matlab之“audioread”函数帮助文档翻译

    课 程 设 计 (1)  原文 audioread Read audio file Syntax [y,Fs] = audioread(filename) [y,Fs] = audioread(fil ...

  6. python之内置函数(二)与匿名函数、递归函数初识

    一.内置函数(二)1.和数据结构相关(24)列表和元祖(2)list:将一个可迭代对象转化成列表(如果是字典,默认将key作为列表的元素).tuple:将一个可迭代对象转化成元组(如果是字典,默认将k ...

  7. war包安装jenkins

    转自:https://blog.51cto.com/bigboss/2129358 系统环境: CentOS 7.5 1804 IP:192.168.1.3 关闭selinux.firewalld j ...

  8. Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks 阅读笔记

    Unpaired Image-to-Image Translation using Cycle-Consistent Adversarial Networks (使用循环一致的对抗网络的非配对图像-图 ...

  9. Pod配置PersistentVolumeClaim详解

    1,创建PersistentVolume kind: PersistentVolume apiVersion: v1 metadata: name: task-pv-volume labels: ty ...

  10. xtrabackup安装使用及原理

    Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具.Xtrabackup中主要包含两个工具 ...