<!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. keepalived深度结合lvs_dr模式

    keepalived与dr模式结合 keepalived介绍 keepalived可提供vrrp以及health-check功能,可以只用它提供双机浮动的vip(vrrp虚拟路由功能), 这样可以简单 ...

  2. matlab文件读写处理实例（一）——不规则文件读取

    数据: A) Title: Income Data B) Relevant Information: Marketing Database. Source: Impact Resources, Inc ...

  3. 基于 xorm 的服务端框架 XGoServer

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  4. How to get started with GIT and work with GIT Remote Repo

    https://www.ntu.edu.sg/home/ehchua/programming/howto/Git_HowTo.html#zz-7. 1.  Introduction GIT is a ...

  5. java存放数据的5个地方

    1.寄存器:最快的存储区,位于处理器内部,但是寄存器的数量极其有限,所以寄存器根据需求进行分配,你不 能直接控制,也不能在程序中感觉到寄存器存在的任何迹象.(C/C+允许向寄存器建议寄存器配, 但它不 ...

  6. 《NET 设计规范》第 2 章 框架设计基础

    <NET 设计规范>第 2 章 框架设计基础 要设计功能强大又易于使用的框架. 要理解广大开发人员并有针对性地为他们设计框架. 要理解各种编程语言,并为他们设计框架. 2.1 渐进框架 2 ...

  7. 淘宝地址爬取及UI展示

    淘宝地址爬取及UI展示 淘宝国家省市区街道获取 参考 foxiswho 的 taobao-area-php 部分代码,改由c#重构. 引用如下: Autofac MediatR Swagger Han ...

  8. CentOS上安装MongoDB速记

    测试环境版本CentOS 6.5 先创建安装目标文件夹并进入至该文件夹: mkdir /opt/mongodb cd /opt/mongodb 给mongodb创建用户及用户组: groupadd m ...

  9. SPOJ 1811 LCS [后缀自动机]

    题意: 求两个串的最大连续子串 一个串建SAM,另一个串在上面跑 注意如果走了Suffix Link,sum需要更新为t[u].val+1 Suffix Link有点像失配吧,当前状态s走不了了就到S ...

  10. ASP.NET Core Razor 页面使用指南

    ASP.NET Core Razor 页面作为 ASP.NET Core 2.0的一部分发布,它是基于页面的全新的Web开发框架.如果您想学习如何使用 ASP.NET Core Razor 页面,可以 ...