<!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. 在nagios中监控windows主机系统地址的状态

    原来的[root@nhserver2_5 objects]# cd /usr/local/nagios/etc/objects[root@nhserver2_5 objects]# vim comma ...

  2. records.config文件配置模板

    # # # Process Records Config File # # <RECORD-TYPE> <NAME> <TYPE> <VALUE (till ...

  3. 隐藏C语言黑窗口

    隐藏C语言程序运行的黑窗口,加入预编译命令: (预编译,Linker链接,windows模式,黑窗口是dos模式) #pragma comment(linker,"/subsystem:\& ...

  4. mui点击加载，下拉刷新，上下整合代码

    mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...

  5. jQuery中的选择器及筛选器

    1.jQuery的介绍 1.jQuery是继prototype之后又一个优秀的Javascript框架.其宗旨是--WRITE LESS,DO MORE! 2.它是轻量级的js库,这是其它的js库所不 ...

  6. MySQL用户授权与权限

    MySQL权限如下表 权限名字 权限说明 Context CREATE 允许创建新的数据库和表 Databases, tables, or indexes DROP 允许删除现有数据库.表和视图 Da ...

  7. StringBuffer和String需要注意的

    首先,StringBuffer的toString方法和String的subString方法都是在新生成了一个新的String. 最近做的一个功能,多线程的从SQLite数据库中读取数据.将数据拼成在M ...

  8. Java对正则表达式的支持(二)

    正则表达式的主要用途: a.在目标字符串中找出匹配正则表达式的部分 b.校验目标字符串是否符合正则表达式,例如校验邮箱地址 c.在目标字符串中替换符合正则表达式的部分为其他的字符串 Scanner类是 ...

  9. firefox在引入vue.js后不支持e=e||window.event的解决办法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  10. vue环境搭建与创建第一个vuejs文件

    我们在前端学习中,学会了HTML.CSS.JS之后一般会选择学习一些框架,比如Jquery.AngularJs等.这个系列的博文是针对于学习Vue.js的同学展开的. 1.如何简单地使用Vue.js ...