<!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. 【Java】泛型学习笔记

    参考书籍 <Java核心技术:卷1> 泛型, 先睹为快 先通过一个简单的例子说明下Java中泛型的用法: 泛型的基本形式类似于模板, 通过一个类型参数T, 你可以"私人定制&qu ...

  2. 浅谈最大流的Dinic算法

    PART 1 什么是网络流 网络流(network-flows)是一种类比水流的解决问题方法,与线性规划密切相关.网络流的理论和应用在不断发展,出现了具有增益的流.多终端流.多商品流以及网络流的分解与 ...

  3. PHP支付第3方接口使用方法。

    去年写过一遍博客文章. 网站申请不到支付宝接口.微信接口,免接口收款实现方式. 网络在发展,支付宝也好,微信也好,技术在进步,这种方式已经不能使用了,明显的一个问题是,支付宝的刷新工具,会定时退出,必 ...

  4. echarts中视觉映射器（visualMap）与时间轴（timeline）混用的实现方法

    1.简述 echarts中的 timeline 组件,提供了在多个 ECharts option 间进行切换.播放等操作的功能. 与其他组件些不同,它需要操作『多个option』. 所以除了基准的ba ...

  5. ansible playbook实践(四)-如何调试写好的playbook文件

    有时,我们写了一个长长,功能很强悍的yaml文件,但是,我们有可能会担心,写的yaml文件是否正确,是否有漏洞危机,毕竟是要修改线上的机器,那么,有可能我们可以从以下几个检查维度来进行,确保在大规模应 ...

  6. Java设计模式——模板方法模式

    转载自:https://www.cnblogs.com/zplogo/p/6428593.html 用抽象基类定义算法框架 RefreshBeverage package com.pattern.te ...

  7. 2018/1/15 JAVA多线程相关

    本文不说synchronized相关,它就是JAVA的一个保留关键字,jdk自己实现了它,但说真的,可应用场景真的少,相比lock接口,它还是被淘汰好吧; 首先,说说lock接口,lock接口是一个工 ...

  8. python中的变量，运算符

    范例: name = 'Crossin' myVar = 123 price = 5.99 visible = True “=”的作用是把右边的值赋予给左边的变量. python中有四种较为常见的数据 ...

  9. c++项目范例

    #include<iostream> #include<string.h> #include<stdlib.h> using namespace std; clas ...

  10. SSM项目手动分页详解

    环境:idea+mysql 首先,既然是mysql,那肯定会用到limit,用这个分页的确很方便. 第一步,编写sql语句 <select id="selectImages" ...