<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>ul+jquery实现下拉选择框</title>

    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <style>

        ul{padding: 0;margin: 0;}

        li{list-style: none;}

        .search-box{width: 325px;height: 35px;line-height: 35px;border: 1px solid #2F889A;border-radius: 3px;margin: 0 auto;}

        .select-box{float: left;position: relative;}

        .search-box span{padding-left: 15px;width: 45px;display: block;background-color: #2F889A;color: #fff;}

        .search-box input{float: left;width: 155px;border: 0;height: 33px;line-height: 35px;outline: 0;}

        .search-box button{width: 85px;background: #2F889A;color: #fff;border: 0;outline: 0;cursor: pointer;height: 35px;line-height: 35px;float: right;}

        .select-box ul{display: none;position: absolute;left: -1px;top: 33px;width: 59px;text-align: center;border: 1px solid #2F889A;}

        .select-box ul li{display: block;padding: 0 5px;}

        .change{background-color: #2F889A;color: #fff}

    </style>

    <script>

        $(function(){

            $(".select-box").hover(function(){

                $(this).children("ul").stop().show();

            },function(){

                $(this).children("ul").stop().hide();

            });

            $(".select-box").children('ul').find("li:not(:last)")

            .mousemove(function(){

                $(this).addClass('change').siblings('').removeClass('change');

            }).click(function(){

                $(this).parent().prev().text($(this).html());

                $(this).parent().css('display','none');

            });

        });

    </script>

</head>

<body>

    <form class="search-box">

        <div class="select-box">

            <span>选择</span>

            <ul>

                <li>微博</li>

                <li>产品</li>

                <li>资讯</li>

                <li>推荐</li>

                <li>更多>></li>

            </ul>

        </div>

        <input type="text"><button>搜索</button>

    </form>

</body>

</html>

ul+jquery自定义下拉选择框的更多相关文章

  1. jQuery插件——下拉选择框

    其实,之前也写过jQuery插件,今天写的是一个模拟select选择的下拉插件. 既然是jQuery插件,那么必然是依赖jQuery的了. 老规矩,直接上代码吧! ;(function () { $. ...

  2. 基于jQuery美化联动下拉选择框

    今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...

  3. CSS自定义select下拉选择框(不用其他标签模拟)

    今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...

  4. FancySelect – 更好用的 jQuery 下拉选择框插件

    FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...

  5. jquery.chosen.js下拉选择框美化插件项目实例

    由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...

  6. CSS3不一样的下拉选择框

    本例中包含两个下拉选择框的动画示例,本例中并未使用select标签.本例中第一个案例也可用于标题.导航栏等位置. 案例一: html布局 <div class="content&quo ...

  7. 一款javascript实现的超炫的下拉选择框

    今天为给大家带来一款javascript实现的超炫的下拉选择框.下拉的列表由半用透明的幽灵按钮组成.显示下拉的时候,列表项由左右两侧飞入.消息时飞向左右两侧.一起看下效果图 在线预览   源码下载 实 ...

  8. combobox级联检索下拉选择框

    1.效果图 2.前端 @{ ViewBag.Title = "Index"; Layout = null; @*自动筛选下拉框*@ <script src="~/S ...

  9. java、easyui-combotree树形下拉选择框

    最近一直在研究这个树形的下拉选择框,感觉非常的有用,现在整理下来供大家使用: 首先数据库的表架构设计和三级菜单联动的表结构是一样,(父子关系) 1.下面我们用hibernate建一下对应的额实体类: ...

随机推荐

  1. MySQL--如何快速对比数据

    在MySQL运维中,研发同事想对比下两个不同实例上的数据并找出差异,除主键外还需要对比每一个字段,如何做呢? 第一种方案,写程序将两个实例上的每一行数据取出来进行对比,理论可行,但是对比时间较长. 第 ...

  2. Linux防止ARP攻击的一些方法

    方法一,最常用的绑定网关 一般服务器的网关是不会变动的,且vps也适用. 一.查看当前网关 [root@local@xiaohuai ~]# arp -a ? (218.65.22.122) at 8 ...

  3. Go笔记-函数

    [函数定义]         func function_name([parameter1 type,parameter2 type])[return_value1 return_type1,retu ...

  4. BZOJ 4518: [Sdoi2016]征途 [斜率优化DP]

    4518: [Sdoi2016]征途 题意:\(n\le 3000\)个数分成m组,一组的和为一个数,求最小方差\(*m^2\) DP方程随便写\(f[i][j]=min\{f[k][j-1]+(s[ ...

  5. BZOJ 3876: [Ahoi2014]支线剧情 [上下界费用流]

    3876: [Ahoi2014]支线剧情 题意:每次只能从1开始,每条边至少经过一次,有边权,求最小花费 裸上下界费用流...每条边下界为1就行了 注意要加上下界*边权 #include <io ...

  6. S5PV210中断处理

    _start: 1.设置栈空间:防止之前的UBOOT代码被覆盖,应为c中需要栈空间 ldr sp, =0x40010000 2.设置CPSR的I,F位,A8打开IRQ,FIQ中断: mov r0, # ...

  7. 重写equals()和hashCode()

    什么时候需要重写equals()? 只有当一个实例等于它本身的时候,equals()才会返回true值.通俗地说,此时比较的是两个引用是否指向内存中的同一个对象,也可以称做是否实例相 等.而我们在使用 ...

  8. OpenLayer3调用天地图示例

    最近,工作中有需要用Openlayer3脚本库调用天地图的wmts服务接口,由于这两个都是刚开始接触,所以是摸着石头过河,遇到了地图显示不了的问题,虽然官网http://www.zjditu.cn/r ...

  9. iterm2 快捷键大全

    Mac 原来自带的终端工具 Terminal 不好用是出了名的,虽然最近几个版本苹果稍微做了些优化,功能上,可用性方面增强不少,无奈有个更好用的 Iterm2 摆在那,基本上也就没有多少出场机会了 I ...

  10. dedecms实现编辑文章时不自动修改发布时间

    dedecms默认编辑文章时自动修改文章的发布时间,如何让它不自动修改发布时间呢? 找到后台编辑文章的模板文件稍作调整即可. 文件/dede/templets/artical_edit.htm 把 $ ...