下拉列表本可以用<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. P2698 [USACO12MAR]花盆Flowerpot——单调队列

    记录每天看(抄)题解的日常: https://www.luogu.org/problem/P2698 我们可以把坐标按照x递增的顺序排个序,这样我们就只剩下纵坐标了: 如果横坐标(l,r)区间,纵坐标 ...

  2. 使用java时报的一些错误

    mysql-connector-java报not found的错误 ftp上传文件失败原因 1.mysql-connector-java报not found的错误 在网上查,很容易查找到java连接数 ...

  3. imu 返回的数据

    Cheader: seq: 423038 stamp: secs: 1562058492 nsecs: 992359716 frame_id: imuorientation: x: 0.0026971 ...

  4. codeforces#1120C. Compress String（dp+后缀自动机）

    题目链接: https://codeforces.com/contest/1120/problem/C 题意: 从前往后压缩一段字符串 有两种操作: 1.对于单个字符,压缩它花费$a$ 2.对于末尾一 ...

  5. zabbix (8) 自动发现

    当主机数量过多时,如果一台一台的添加,估计整个人都要崩溃,而通过自动发现或者自动注册可以大批量的添加主机,并且自动绑定模板,触发器,动作等操作 1.基本配置 (1)创建发现规则 (2)配置规则 效果如 ...

  6. 切换node版本，node-sass安装报错

    一.问题 经常在开发过程中,会遇到切换node环境的情况,这时候切换之后,npm安装不了node-sass,有可能是之前把node-sass安装地址修改了,导致翻墙翻不了,所以安装不了. 二.解决 1 ...

  7. JAVA SparkSQL初始和创建DataFrame的几种方式

    建议参考SparkSQL官方文档:http://spark.apache.org/docs/latest/sql-programming-guide.html 一.前述       1.SparkSQ ...

  8. 一个hin秀的小学三年级奥数题 [hin秀]

    ~~~~~~不知为何总会被小学的题虐哭QAQ,真的秀啊,毒害广大小朋友~~~~~~ 一个hin秀的小学三年级奥数题    [hin秀] 题目: 给出一个无限大的棋盘  n×n  (n>0 , 是 ...

  9. Android：ART 优化配置（Mstar-6A648）

    1．Android预优化的原理 先来回顾一下Android的发展史,在2014年的Google I/O大会上,Google隆重的发布了Android 4.4操作系统,其中有一个环节着重介绍了ART(A ...

  10. 展BOM

    CS_BOM_EXPL_MAT_V2 *&---------------------------------------------------------------------* *&am ...