下拉列表本可以用<select>配合<option>来写，方便得很。但是在前端中，好用的东西都有兼容，为了避免出现兼容性的问题，下拉列表用js写再合适不行了。

<body>部分————————简单的布个局

<body>

    <div id="box">请选择手机名称</div>

    <div id="down">

        <ul class="phones">

            <li>华为</li>

            <li>小米</li>

            <li>oppo</li>

            <li>vivo</li>

            <li>爱疯</li>

            <li>三星</li>

        </ul>

    </div>

</body>

<style>部分————————再简单也要把样式写好看点

<style>

        #box{

            color: aliceblue;

            width: 110px;

            height: 25px;

            border: 1px solid #c5c5c5;

            border-radius: 10px;

            background-color: #797777;

            text-align: center;

            /* text-indent: 5px; */

            font-size: 14px;

            line-height: 25px;

            cursor: pointer;

        }

        #down{

            border: 1px solid #c5c5c5;

            width: 90px;

            margin-left: 5px;

            display: none;

        }

        ul{

            padding: 0;

            margin: 0;

        }

        li{

            list-style: none;

            font-size: 14px;

            border-bottom: 1px dashed #c5c5c5;

            text-align: center;

            height: 25px;

            line-height: 25px;

            color: aliceblue;

            background-color: #333;

            cursor: pointer;

        }

        li:hover{

            background-color: #5c0e0e;

        }

    </style>

<script>部分————————实现功能的部分

<script>

        var obox = document.getElementById("box");

        var odown = document.getElementById("down");

        var oli = document.querySelectorAll("li");

        console.log(oli);

        var timer;

        //当点击obox时，呈现出下拉列表的内容，给个延时效果

        obox.onclick = function(){

            clearInterval(timer);

            timer = setInterval(function(){

                odown.style.display = "block";

            },300)

            ///选中列表中的某一项并将其呈现在box中,隐藏下拉列表

            for(var i=0;i<oli.length;i++){

                oli[i].n = i;

                oli[i].onclick = function(){

                    obox.innerHTML = this.innerHTML;

                    odown.style.display = "none";

                    clearInterval(timer);

                }

            }

        }

</script>

　　以上就是我写的一个简单的下拉列表，尚有欠缺处，还望包含。

用js实现菜单的下拉列表，实用又简单的更多相关文章

  1. 顶 兼容各种浏览器js折叠菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS树形菜单

    超全的JS树形菜单源代码共享(有实例图) 树形菜单是很常用的效果,常用在管理软件当中,但是一套树形菜单已经不能满足需求,所以如果能有一套比较全面的树形菜单JS特效代码,将会非常方便,下面懒人萱将超全的 ...

  3. js矩阵菜单或3D立体预览图片效果

    js矩阵菜单或3D立体预览图片效果 下载地址: http://files.cnblogs.com/elves/js%E7%9F%A9%E9%98%B5%E8%8F%9C%E5%8D%95%E6%88% ...

  4. Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...

  5. 基于Bootstrap Ace模板+bootstrap.addtabs.js的菜单

    这几天研究了基于bootstrap Ace模板+bootstra.addtabs.js实现菜单的效果 参考了这个人的博客 https://www.cnblogs.com/landeanfen/p/76 ...

  6. 适合移动手机使用的js环形菜单特效插件

    blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...

  7. Intercooler.js – 让 AJAX 像锚标签一样简单

    使用 Intercooler,你可以添加 Ajax 到你的应用程序,而无需使用客户端模式的路由,认证,渲染,工厂或依赖注入.事实上,你不需要写任何的 JavaScript 代码.Intercooler ...

  8. 修改js confirm alert 提示框文字的简单实例

    修改js confirm alert 提示框文字的简单实例: <!DOCTYPE html> <html> <head lang="en"> & ...

  9. JS获取各种宽度、高度的简单介绍：

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

随机推荐

  1. <frame>、<iframe>、<embed>、<object> 和 <applet>

    frame frame 必须在 frameset 里,而 frameset 又不能和 body 共存(就是一旦存在 frame,就不能存在 body 了,因此这个基本每人使用) 推荐阅读:https: ...

  2. Educational Codeforces Round 49 (Rated for Div. 2)

    题目链接 还缺F和G,至少上橙之后把F补了吧. A - Palindromic Twist 题意:每个字母恰好操作一次,变成其之前或者其之后的一个字母,注意'a'和'z'不互通,求是否可以变成回文串. ...

  3. mysql远程访问设置

    MySQL GUI Tools 开启mysql的远程访问权限 默认mysql的用户是没有远程访问的权限的,因此当程序跟数据库不在同一台服务器上时,我们需要开启mysql的远程访问权限. 主流的有两种方 ...

  4. Multiple commands produce "*.framework"

    参考链接记录个问题,这是xcode10后新build系统导致的,新系统帮我们检查了很多东西,最优化我们的构建, 两种方案 1.用旧的系统(不推荐)   2.这个是build setting->b ...

  5. 2018-2019-2 《网络对抗技术》Exp9 Web安全基础 20165114

    Exp9 Web安全基础 目录 一.实验内容 二.基础问题回答 (1)SQL注入攻击原理,如何防御 (2)XSS攻击的原理,如何防御 (3)CSRF攻击原理,如何防御 三.实践过程记录 3.1 注入缺 ...

  6. [Ubuntu] A start job is running for...interfaces

    CPU:RK3288 系统:Linux 移植 Ubuntu 16.04 到嵌入式平台,如果以太网有问题,在这里会耗时大约5分钟 开机后可以修改 Ubuntu 配置来缩短时间 打开下面的文件,可以看到最 ...

  7. JavaScript DOM的一些扩展

    对DOM的扩展主要是:Selectors API和HTML5. Selectors API Selectors API是由W3C发起指定的一个标准,致力于让浏览器原生支持CSS查询.Selectors ...

  8. java Calendar 小时值得到24进制格式

    Calendar cal = Calendar.getInstance(); cal.get(Calendar.HOUR_OF_DAY)

  9. Cesium获取经度 ，纬度，高度

    实例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  10. 【Java】能提高日常工作效率的一些Java函数

    自编工具总是临时抱佛脚来得顺溜,宜常备手边以提高工作效率: package com.hy; import java.io.File; /** * 日常工作常用的一些工具方法 * @author 逆火 ...