下拉列表本可以用<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. ckeditor自定义工具栏

    /** * 获取编辑器工具栏自定义参数 * @param type 类型 simple=极简版 basic=基本版 full=完整版 */ function get_ckeditor_toolbar( ...

  2. ftp连接

    package enterprise.celerity.ac.util; import java.io.IOException;import java.io.InputStream;import ja ...

  3. HDU 6041 I Curse Myself ——（仙人掌图，tarjan，转化）

    题解见这个博客:http://blog.csdn.net/ME495/article/details/76165039. 复杂度不太会算..这个经典问题的解法需要注意,维护队列里面只有k个元素即可.另 ...

  4. GO语言反射

    反射可以作为了解,不必深入! 反射介绍 Go语音提供了一种机制在运行时更新变量和检查它们的值.调用它们的方法和它们支持的内在操作,但是在编译时并不知道这些变量的具体类型.这种机制被称为反射.反射也可以 ...

  5. mysql的select语句

    参考: https://www.cnblogs.com/xiaoshen666/p/10824117.html https://www.cnblogs.com/zouwangblog/archive/ ...

  6. 开发WINDOWS服务程序

    开发WINDOWS服务程序 开发步骤: 1.New->Other->Service Application 2.现在一个服务程序的框架已经搭起来了,打开Service1窗口,有几个属性说明 ...

  7. arcgis python 一个mxd打包mpk

    def onempk(fileName): if fileName: mxd = arcpy.mapping.MapDocument(fileName) else: mxd = arcpy.mappi ...

  8. PHP无限级树形结构算法（递归和引用）

    测试数组 $array = [ [, , 'name' => '这是主类'], [, , 'name' => '这是主类'], [, , 'name' => '父级为1子类'], [ ...

  9. SpringBoot之返回json数据

    一.创建一个springBoot个项目 二.编写实体类 /** * 返回Json数据实体类 */ public class User { private int id; private String ...

  10. tensorflow cpu问题

    返回: -- ::] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 ...