<!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. C# 控件

    .ascx:Web窗体用户控件.用来存放独立的用户控件,可提供众多页面使用: <%@ Control Language="C#" AutoEventWireup=" ...

  2. postfix配置spf认证和dkim认证

    1.为邮箱域名添加spf认证: 登录域名解析控制台添加txt记录: v=spf1 include:spf1.domain.com ~all spf1.domain.com  A记录解析到你的固定IP ...

  3. Star Schema and Snowflake Schema

    在设计数据仓库模型的时候,最常见的两种是星型模型与雪花模型.选择哪一种需要根据业务需求以及性能的多重考量来定. 星型模型 在星型模型当中,一张事实表被若干张维度表所包围.每一个维度代表了一张表,有主键 ...

  4. 禁止用键盘左右箭头，去切换PageControl页签

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  5. XE5开发Android程序调用电话相关功能(短信息和电话) [转]

    其实都可以通过intent和URI调用系统功能.Windows程序员可以理解成是ShellExecute.这个是万金油.可以有调用各种功能.后面会介绍. 1.短信息.很简单 方法a.不使用Intent ...

  6. XE5 Android 开发数据访问手机端 解决乱码的办法 [转]

    经过测试,将sqlserver里的字段由varchar 或者char  改为  nvarchar 或者nchar 然后在手机端的clientdataset 增加字段的时候数据类型选择widestrin ...

  7. Git忽略规则和.gitignore规则不生效的解决办法

    Git忽略规则和.gitignore规则不生效的解决办法   Git忽略规则: 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如果 ...

  8. 数据仓库3NF基础理论和实例

    一.引言 最近在梳理大数据模式下的数据仓库数据模型,花了点时间,系统的回顾一下传统数据仓库数据模型设计的理论,作为笔记分享给大家,很多资料来自互联网和读过的数据仓库理论和实践相关的熟悉,无剽窃之心,共 ...

  9. 测试教程网.unittest教程.2. 基本用法

    From: http://www.testclass.net/pyunit/basic_example/ 我们通过最简单的例子来看一下unittest的基本用法,下面的代码测试了3个python字符串 ...

  10. 玄学曲线并不玄 教你如何看懂GPU呈现

    红色代表了“执行时间”,它指的是Android渲染引擎执行盒子中这些绘制命令的时间,假如当前界面的视图越多,那么红色便会“跳”得越高.实际使用中,比如我们平时刷淘宝App时遇到出现多张缩略图需要加载时 ...