html代码


<p id="select_box">

    <dl id="types">

        <dt><span id="select_type">请选择</span></dt>

        <dd>百货</dd>

        <dd>生活用品</dd>

        <dd>电脑外设</dd>

        <dd>数码产品</dd>

    </dl></p>


css代码


a{   

    text-decoration: none;

}

#select_box{   

    position: relative;   

    top: 10px;   

    left: 0px;   

    display: inline-block;   

    width: 192px;

}

#select_box dl{   

    float: left;   

    width: 192px;   

    height: 32px;   

    background: #FFFFFF;   

    cursor: pointer;   

    z-index: 100;

}

#select_box dl dt{   

    width: 172px;   

    height: 32px;   

    line-height: 34px;   

    font-size: 1em;   

    color: #fff;   

    background:url(../img/select_bg.png) no-repeat center right;   

    background-color:rgb(60,179,113);   

    margin: 0;   

    padding-left: 20px;}

#select_box dl dd{   

    position: relative;   

    left: -40px;   

    width: 172px;   

    height: 32px;   

    line-height: 32px;   

    font-size: .9em;   

    color: #FFFFFF;   

    background: #2A8F57;   

    padding-left: 20px;   

    z-index: 10;

}


jQuery代码

$(function(){

                $("#types dd").hide();

                $("#select_box").toggle(function(){

                    $("#types dd").stop(true,false).slideDown(200);

                },function(){

                    $("#types dd").stop(true,false).slideUp(200);

                });

                $("#types dd").click(function(){

                    var type_val=$(this).html();

                    $("#types dt").html(type_val);

                    $("#types dd").stop(true,false).slideUp(200);

                });

            })


TAG: Css jQuery

如果你觉得本文还不错,记得分享哦^-^^-^

相关内容:


广告赞助

你可能喜欢




渝ICP备15000999-1号

共享汽车使用网    star个人博客    小十博客    草根赚钱创业    启明博客    王杭个人博客    逐梦博客    李洁博客    Amals技术博客    破晓博客    雨巷博客    起点终点    lisa小站    网讯it资讯    单职业传奇