下拉列表本可以用<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. lucene正向索引——正向信息，Index –> Segments (segments.gen, segments_N) –> Field(fnm, fdx, fdt) –> Term (tvx, tvd, tvf)

    转自:http://www.cnblogs.com/forfuture1978/archive/2009/12/14/1623599.html 上面曾经交代过,Lucene保存了从Index到Segm ...

  2. 我的公众号：WebHub

    欢迎各位小可爱关注我的公众号WebHub(ID:myWebHub),公众号不定期更新软件行业的总结性文章,内容包括行业趋势和软件哲学,文章不谈技术只谈思想,满满干货! 此外,公众号文章同步CSDN博客 ...

  3. Qt代码配色VS2015风格

    通过本文的方法可以将VS2015的深色主题界面应用到Qt上,对于喜欢VS代码风格配色的人应该会比较有用 效果图:  1. 设置IDE主题 为了配合vs深色的代码编辑背景,将Qt的主题也换成深色版本 2 ...

  4. [原][OSG][osgEarth]osgEarth例子程序简介

    1.osgearth_graticule:生成经纬线. 2.osgearth_annotation:各类标注(点.线.面.模型.文本等). 3.osgearth_city:加载一个城市三维模型,可以浏 ...

  5. Canvas恢复布局

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  6. jsp中用java代码拼接下拉选备选项及默认值【我】

    <th id="TD_N_CERTIFICATION_TYPE" >证件类型:</th> <td > <select id="C ...

  7. 123456123456#0#-----com.threeapp.JiQiRenDaZhan01----机器人大战恐龙

    com.threeapp.JiQiRenDaZhan01----机器人大战恐龙

  8. Python基础之set集合与函数

    set集合 集合是一个无序且不重复的元素组合,以大括号表示.使用详情: >>> b=set(a) >>> type(b) <class 'set'> & ...

  9. centos6.8 ssh 问题

    xshell用ROOT不能登录 需要把 /etc/ssh/sshd_config 中的端口新建一个 不能用默认的

  10. UIImagePickerController的用法

    在实际的APP开发中,我们经常会见到应用的这样的功能 :需要选取手机相册的照片,还有选取视频,拍视频和照相的操作. 在iOS开发中,实现以上的功能就需要用到 UIImagePickerControll ...