ul+jquery自定义下拉选择框

最新推荐文章于 2023-02-22 13:01:52 发布

辛苦的码农20200609

最新推荐文章于 2023-02-22 13:01:52 发布

阅读量264

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h21cb22hikjb.html

版权

前端专栏收录该内容

785 篇文章 4 订阅

订阅专栏

<!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>

辛苦的码农20200609

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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.
复制链接

扫一扫