下拉菜单

最新推荐文章于 2022-08-09 05:08:46 发布
有点浪^_^
最新推荐文章于 2022-08-09 05:08:46 发布
阅读量219
点赞数
分类专栏： JavaScript 文章标签：下拉列表
本文链接：https://blog.csdn.net/interface2016/article/details/53055177
版权
JavaScript 专栏收录该内容
2 篇文章 0 订阅
订阅专栏
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .selectbox{
            height:95px;
            width:1170px;
            clear:both;
            margin:auto;
            background:#f7f7f7
        }
        .selemediv{
            width:180px;
            height:35px;
            float:left;
            margin-top:30px;
            margin-left:30px;
            position:relative
        }
        .selemenu{
            width:180px;
            height:35px;
            background:#fff;
            color:#999;
            text-indent:10px;
            border:none;
            background:url(images/xiala.png) 150px center no-repeat #fff;
        }
        .selemenu{
            font-size:14px;
            line-height:35px;
        }
        .citylist span{
            display:block;
            clear:both;
            cursor:pointer;
        }
        .citylist span:hover{
            background:#eee;
        }
        .citylist{
            display:none;
            line-height:35px;
            background:#fff;
            text-indent:10px;
            font-size:12px;
            position:absolute;
            left:0; top:35px;
            width:180px;
            box-shadow:0px 5px 5px #ccc;
        }
        .citylist2{
            box-shadow:0px 5px 5px #ccc;
            font-size:14px; color:#666;
            padding:20px 40px;
            position:absolute;
            top:35px;
            left:0;
            background:#fff;
            border-bottom:1px solid #f6f6f6;
            display:none;
        }
        .citylist2 ul{
            float:left;
            width:930px;
            line-height:54px;
        }
        .citylist2 ul li{
            float:left;
            cursor:pointer
        }
        .citylist2 ul li:hover{
            color:#ff4400
        }
        .citylist2 .shangquan li{
            width:11%;
        }
        .citylist2 .chengshi li{
            width:20%;
        }
        .citylist2 .leibie{
            width:100px;
            float:left;
            line-height:54px;
        }
        ul,li{
            list-style:none;
        }
        .xzk{
            width:1030px; overflow:hidden; clear: both
        }
        .citylist2 .active{
            color:#ff4400
        }
    </style>
</head>

<body>
<div class="selectbox">
    <div class="selemediv">
    <div class="selemenu " >
    <span class="sqinput">洛杉矶</span><span class="csinput"></span></div>
                            <div class="citylist2">
                              <div class="xzk">
                                <div class="leibie">商圈</div>
                                 <ul class="shangquan">
                                 <li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 </ul>
                             </div>
                             <div class="xzk">
                                <div class="leibie">城市</div>
                                 <ul class="chengshi">
                                 <li class="active">菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 <li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 <li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 <li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 <li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 <li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li><li>菜单一</li>
                                 <li>菜单二</li>
                                 <li>菜单三</li>
                                 <li>菜单四</li>
                                 </ul>
                             </div>
                           </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
                            <DIV class="citylist">
                             <span>菜单一</span>
                             <span>菜单二</span>
                             <span>菜单三</span>
                             <span>菜单四</span>
                            </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
                            <DIV class="citylist">
                             <span>菜单一</span>
                             <span>菜单二</span>
                             <span>菜单三</span>
                             <span>菜单四</span>
                            </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
                            <DIV class="citylist">
                             <span>菜单一</span>
                             <span>菜单二</span>
                             <span>菜单三</span>
                             <span>菜单四</span>
                            </div>
    </div>
    <div class="selemediv"> <div class="selemenu">请选择金额类型</div>
                            <DIV class="citylist">
                             <span>菜单一</span>
                             <span>菜单二</span>
                             <span>菜单三</span>
                             <span>菜单四</span>
                            </div>
    </div>

</div>
<div style="height:500px; color:#fff" id="cs"></div>
<script>
    $(function(){
        $(".selemenu").click(function(){
            $(this).next().slideToggle();
            $(this).parents().siblings().find(".citylist,.citylist2").slideUp();
        })
        $(".citylist span").click(function(){
            var text=$(this).text();
            $(this).parent().prev().html(text);
            $(this).parent().prev().css("color","#666")
            $(this).parent().fadeOut();

        })
        $(".shangquan li").click(function(){
            $(".shangquan li").removeClass("active")
            $(this).addClass("active")
            var text1=$(this).text();
            $(".sqinput").html(text1)
        })
        $(".chengshi li").click(function(){
            $(".chengshi li").removeClass("active")
            $(this).addClass("active")
            var text2=$(this).text();
            $(".csinput").html("-"+text2)
            $(".citylist2").slideUp();
        })
        $(function(){
            $(document).not($(".selectbox")).click(function(){
                $(".citylist,.citylist2").slideUp();
            })
            $(".selectbox").click(function(event){
                event.stopPropagation();
            })
        })
    });

</script>

</body>
</html>
有点浪^_^
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
下拉菜单

<!doctype html><html><head><meta charset="utf-8"><script src="js/jquery.min.js"></script> <style> *{ margin:0; padding:0; } .selectbox{
复制链接

扫一扫