<!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. RSA 加密算法 Java 公钥加密私钥解密 和 私钥加密公钥解密 的特点

    package com.smt.cipher.unsymmetry; import org.apache.commons.codec.binary.Base64; import org.apache. ...

  2. MySQL测试报告

    硬件配置: 3台服务器:192.168.23.168,  192.168.23.169,  192.168.23.170 硬盘:230G 内存:16G Linux内核:Linux geoserver. ...

  3. GetClass与RegisterClass的应用一例

    利用GetClass与RegisterClass可以实现根据字符串来实例化具体的子类,这对于某些需要动态配置程序的场合是很有用的.其他的应用如子窗体切换,算法替换等都能得到应用. unit Examp ...

  4. Modbus RTU 协议使用汇总

    原创地址:https://blog.csdn.net/u012166958/article/details/64920144 标准的Modbus 口是使用RS-232C 兼容串行接口,它定义了连接口的 ...

  5. STL中erase()的用法

    erase()是STL提供的容器中比较常用的方法之一,它的功能是删除容器中的某些元素,其中它的函数原型如下: 1.有两个参数,且参数类型都是size_t型: string& erase ( s ...

  6. C/C++程序CPU问题分析

    转载地址:http://www.10tiao.com/html/473/201606/2651473094/1.html   程序的CPU问题是另外一类典型的程序性能问题,很多开发人员都受到过程序CP ...

  7. Android开发之选项菜单（optinosMenu）

    android一共有三种形式的菜单:                  1.选项菜单(optinosMenu)                  2.上下文菜单(ContextMenu)       ...

  8. asp.net 项目目录说明

    Bin 目录用来存放编译的结果,bin是二进制binrary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本, 分别对应的文件夹为bin/Debug和bin/ ...

  9. P2430严酷的训练

    传送 这个题的题干很长,长到令人恶心 这个题的p乍一看好像没有卵用,但其实他很有用(废话).这里的“费用”不再是tw[i](wky做第i道题的时间),而是tw[p[i]](wky做第i道题所对应的知识 ...

  10. Java学习——Applet菜单

    程序功能:在窗口中添加菜单栏,在菜单栏添加菜单项,并添加下拉菜单和 2 级菜单,通过选择菜单项可以执行不同操作,生成如下图所示窗口. package cys; import java.awt.*; i ...