<!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实现tail -f 功能

    这篇文章最初是因为reboot的群里,有人去面试,笔试题有这个题,不知道怎么做,什么思路,就发群里大家讨论 我想了一下,简单说一下我的想法吧,当然,也有很好用的pyinotify模块专门监听文件变化, ...

  2. MySQL 检索数据（SELECT）

    检索单个列  mysql> SELECT  列名  FROM  表名; 如下,从表products中检索prod_name列 mysql> SELECT  prod_name  FROM  ...

  3. sbt第一次运行下载jar包很慢解决办法

    一.补充sbt配置文件,添加下载路径 文件结构如下:修改了sbtconfig.txt,repo.properties. sbtconfig.txt配置内容为: # Set the java args  ...

  4. PHP破解wifi密码(wifi万能钥匙的接口)

    新建wifi.php,复制粘贴 <?php $bssid = $_POST["bssid"] ; $ssid = $_POST["ssid"] ; if ...

  5. C# .net WebRequest HttpWebRequest 禁用系统默认代理。

    直接将Proxy属性设置为null即可. 等同于配置文件里的 <proxy usesystemdefault="False" />

  6. CentOS 7.4 初次手记：第二章 CentOS安装步骤

    第二章 CentOS安装步骤... 18 第一节 下载... 18 第二节 分区参考... 18 第三节 安装... 19 I Step 1:引导... 19 II Step 2:配置... 20 I ...

  7. Mysql 性能优化7【重要】sql语句的优化 慢查询

    慢查询时间设置 慢查询日志分析工具 另一个慢查询日志分析工具 如何对sql进行特定的优化

  8. Java第10次实验(网络)

    参考资料 本次作业参考文件 正则表达式参考资料 漫画:HTTP 协议极简教程,傻瓜都能看懂! 注:主要根据实验任务书的指导完成本次实验. 第1次实验 1. 网络基础 ipconfig.ping Con ...

  9. ALGO-123_蓝桥杯_算法训练_A+B problem

    问题描述 Given two integers A and B, your task is to output their sum, A+B. 输入格式 The input contains of o ...

  10. 【springBoot】之快速构建一个web项目

    基于maven,首先看pom文件 <parent> <groupId>org.springframework.boot</groupId> <artifact ...