下拉列表本可以用<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. python math.asin

    import mathmath.asin(x) x : -1 到 1 之间的数值.如果 x 是大于 1,会产生一个错误. #!/usr/bin/pythonimport math print &quo ...

  2. GFS中元数据的管理

    GFS 元数据(metadata)中包含三部分: GFS元数据的管理方式: 1.文件的命名空间和块的命名空间: 采用持久化的方式. 对于文件和块的命名空间以及从文件到块的映射:通过向操作日志登记修改而 ...

  3. Java类的变量初始化顺序

    大家在去参加面试的时候,经常会遇到这样的考题:给你两个类的代码,它们之间是继承的关系,每个类里只有构造器方法和一些变量,构造器里可能还有一段代码对变量值进行了某种运算,另外还有一些将变量值输出到控制台 ...

  4. spring boot + vue 前后分离实现登录功能（一）

    使用webpack 打包初始化项目 vue init webpack book-vue 进入工程目录 cd hello-vue 安装 vue-router npm install vue-router ...

  5. EL表达式 与 JSTL标准标签库

    目录 EL表达式 什么是EL表达式 作用 EL内置11对象 EL执行表达式 JSTL 什么是JSTL JSTL标准标签库有5个子库 把JSTL标签库jar包引入工程当中 if标签 foreach标签 ...

  6. 微信小程序之分享功能

    说到分享 大家都会想到手机右上角点击不就分享了么?对的没错,那样是分享转发的是小程序  而不是指定的某个页面,所以自己动手丰衣足食,自己写一个转发功能被, 其实也没那么可怕,主要参考的是微信小程序AP ...

  7. SpringBoot表单数据校验

    Springboot中使用了Hibernate-validate作为默认表单数据校验框架 在实体类上的具体字段添加注解 public class User { @NotBlank private St ...

  8. git 初次提交

    前提:已经关联了ssh到本地,不用再输入用户名和密码 知道仓库地址:https://xxx.xxx.com/aiotcloud/yihao01-node-js.git 第一步:进入本地文件夹执行 gi ...

  9. ISO/IEC 9899:2011 条款6.4.3——通用字符名

    6.4.3 通用字符名 语法 1.通用字符名: universal_character-name: \u hex-quad(四位十六进制数) \U hex-quad hex-quad hex-quad ...

  10. springboot之docker化

    1.Docker安装 本人是centos7系统,安装也是按照官方文档进行安装.https://docs.docker.com/install/linux/docker-ce/centos/ ,即 1. ...