<!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. 【转】sed 的参数

    一.15个参数 1.r 从文件读入 [root@watchout2 ~]# cat file12345 [root@watchout2 ~]# cat newfile abcde [root@watc ...

  2. linux socket 编程（C语言）[转]

    最近看了一些网络编程的书籍,一直以来总感觉网络编程神秘莫测,其实网络编程入门还是很容易学的,下面这些代码是我在linux下编写的,已经运行过了,编译之后就可以运行了.有不足之处希望大家多多指出,共同学 ...

  3. 一行代码搭建 Python 静态服务器

    如果电脑上安装有Python, 那么进入到目标文件夹,在终端中运行如下命令, 即可搭建映射当前目录的静态文件服务器: python -m SimpleHTTPServer 9000 默认端口号是800 ...

  4. ROS学习笔记

    创建ros工作环境: mkdir -p ~/catkin_ws/src //建立项目目录,同时生成src文件夹 cd ~/catkin_ws/ //进入项目目录 catkin_make //编译项目, ...

  5. R语言-单一变量分析

    R语言简介: R语言是一门专用于统计分析的语言,有大量的内置函数和第三方库来制作基于数据的表格 准备工作 安装R语言 https://cran.rstudio.com/bin/windows/base ...

  6. Oracle-Linux安装配置python3.6环境

    最近公司更换了linux系统的版本,从Ubuntu改为了oracle linux,相关的Python环境也要重新配置,记录一下基本配置的过程. 相关环境 系统:oracle linux7.3 系统自带 ...

  7. spring boot 中实现兼容不同的请求类型的方法。

    比如一个接口,既想实现请求参数是application/json,又想实现form提交,改怎么做呢?用postman去测试,发现不可能做到两全其美. 我有一个方法,就是不用requestbody,也可 ...

  8. CentOS7安装MySQL的方法之RPM包方式

        CentOS7安装MySQL的方法之RPM包方式        

  9. 给你的jQuery项目赋予Router技能吧

    现在你不会React/Vue都不好意思说自己是前端,不过我相信很多前端项目还是基于jquery类库的传统模式的,假如你有追求的态度使用过requireJs这个库,你一定思考过一个问题,或者说一种组件化 ...

  10. bzoj 4813: [Cqoi2017]小Q的棋盘 [树形背包dp]

    4813: [Cqoi2017]小Q的棋盘 题意: 某poj弱化版?树形背包 据说还可以贪心... #include <iostream> #include <cstdio> ...