zoukankan      html  css  js  c++  java
  • ul+jquery自定义下拉选择框

    <!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>
  • 相关阅读:
    大数据笔记13:Hadoop安装之Hadoop的配置安装
    Android(java)学习笔记206:JNI之工具快速开发步骤
    Android(java)学习笔记205:JNI之编写jni程序适配所有处理器型号
    JS 实现Json查询方法
    js中call与apply用法
    大数运算(待续)
    HDU 2553(N皇后)(DFS)
    C++ STL:stack和queue
    快速幂取模(POJ 1995)
    位运算
  • 原文地址:https://www.cnblogs.com/wangjae/p/6699551.html
Copyright © 2011-2022 走看看