<!DOCTYPE html >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>模拟select控件</title>
    <style>
        html,body{height:100%;overflow:hidden;}
        body,div,form,h2,ul,li{margin:0;padding:0;}
        ul{list-style-type:none;}
        body{background:#23384e; }
        #search,#search form,#search .box,#search .select,#search a{background:url(search.jpg) no-repeat;}
        #search,#search .box,#search form{height:34px;}
        #search{position:relative;width:350px;margin:10px auto;}
        #search .box{background-position:right 0;}
        #search form{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}
        #search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}
        #search a{float:left;width:80px;height:24px;color:#333;letter-spacing:4px;line-height:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}
        #search a:hover{color:#f60;background-position:-80px -90px;}
        #search .sub{position:absolute;top:26px;left:40px;color:#fff;width:198px;background:#2b2b2b;border:1px solid #fff;display:none;}
        #search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:10px;margin-bottom:-1px;border-bottom:1px dotted #fff;}
        #search .sub li:hover{background:#8b8b8b;}
    </style>
</head>
<body>
    <div id="search">
        <div class="box">
            <form>
                <span id="select" class="select">请选择游戏名称</span>
                <a href="javascript:;">搜索</a>
            </form>
        </div>
        <ul id="sub" class="sub">
            <li>地下城与勇士</li>
            <li>魔兽世界（国服）</li>
            <li>魔兽世界（台服）</li>
            <li>热血江湖</li>
            <li>大话西游II</li>
            <li>QQ幻想世界</li>
        </ul>
    </div>
</body>
</html>
<script src="public.js"></script>
<script>
    // 点击 span 显示 列表 ul
    // 点击文档 document ,隐藏 列表ul
    // 点击每一个li ， 将当前li的 内容 显示到 span中
    var oUl = $id("sub");
    var list = oUl.children;
    //点击span时，显示列表
    $id("select").onclick = function( e ){
        //兼容写法
        var e = e || event;
        e.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true;
        oUl.style.display = "block";
    }
    //点击 文档document时，隐藏列表
    document.onclick = function(){
        oUl.style.display = "none";
    }
    //点击每个li时，内容显示到span中
    for( var i = 0 ; i < list.length ; i++ ){
        list[i].onclick = function( e ){
            //兼容写法
            var e = e || event;
            e.stopPropagation() ? e.stopPropagation() : e.cancelBubble = true;
            $id("select").innerHTML = this.innerHTML;
            //当某个li的内容显示到span中后，让列表隐藏
            oUl.style.display = "none";
        }
    }
</script>

模拟select控件，css模拟下拉的更多相关文章

  1. 模拟select控件&&显示单击的坐标&&用户按下键盘，显示keyCode

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

  2. 模拟select控件功能

    直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. 【Android-自定义控件】SwipeRefreshDemo 下拉刷新，上拉加载

    参考:https://github.com/PingerOne/SwipeRefreshDemo 谷歌官方的SwipeRefreshLayout控件,只有下拉刷新功能. 自定义的SwipeRefres ...

  4. 基于Jquery UI的autocompelet改写，自动补全控件，增加下拉选项，动态设置样式，点击显示所有选项，并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  5. DevExpress控件GridView挂下拉控件无法对上值

    下拉控件使用RepositoryItemLookUpEdit,加入如下事件进行处理. repositoryItemLookUpEdit1.CustomDisplayText += new DevExp ...

  6. android--------自定义控件ListView实现下拉刷新和上拉加载

    开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...

  7. jquery input 下拉框(模拟select控件)焦点事件

    本章主要讲解如何实现select下拉列表可输入效果 ps:input提供输入,然后用ul去模拟一个select下拉列表效果即可,关键在于点击div之外的地方隐藏ul,下面是html基本结构: < ...

  8. js+CSS实现模拟华丽的select控件下拉菜单效果

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

  9. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

随机推荐

  1. Python random模块sample、randint、shuffle、choice随机函数

    一.random模块简介 Python标准库中的random函数,可以生成随机浮点数.整数.字符串,甚至帮助你随机选择列表序列中的一个元素,打乱一组数据等. 二.random模块重要函数 1 ).ra ...

  2. Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' 解决办法

    启动mysql 报错: ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var/lib/mysql/m ...

  3. JVisualVM监控本地Java进程

    一.基于JVisualVM的可视化监控 1.打开C:\Program Files\Java\jdk1.8.0_131\bin下的jvisualvm.exe 2.打开后,会列出本机所有的Java进程 3 ...

  4. 读DataSnap源代码（一）

    Delphi的DataSnap用了一段时间了,但一直感觉有些地方还不够了解,所以花时间阅读了源代码,特作此烂笔头. Datasnap是在之前的WebBorker基础上搭建的,DataSnap向导自动生 ...

  5. 剑指offer（1）

    1.二维数组中的查找在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. public ...

  6. SPI 核的寄存器空间

    SPI 核的寄存器空间 寄存器的地址与定义: 寄存器描述与配置: 复位寄存器: 控制寄存器: 状态寄存器: 数据发送寄存器: 在使用DTR之前,一定要经过复位处理. 对于DTR的操作中,首先写入com ...

  7. STM32 printf函数

    /******************** (C) COPYRIGHT 2012 WildFire Team *************************** * 文件名 :usart1.c * ...

  8. Docker容器技术的PaaS云平台架构设计***

    基于微服务架构和Docker容器技术的PaaS云平台建设目标是给我们的开发人员提供一套服务快速开发.部署.运维管理.持续开发持续集成的流程.平台提供基础设施.中间件.数据服务.云服务器等资源,开发人员 ...

  9. MSSQL 2012 密钥

    MICROSOFT SQL SERVER 2012 企业核心版激活码序列号: FH666-Y346V-7XFQ3-V69JM-RHW28 MICROSOFT SQL SERVER 2012 商业智能版 ...

  10. 同台同时多开DELPHI2007的解决办法

    Cannot create file "C:\Users\Administrator\AppData\Local\Temp\EditorLineEnds.ttr"这个问题的产生根据 ...