利用Css+jQuery 製作下拉式選單

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);
                });
            })

如果是作為select元件使用，可以添加form表單和隱藏域(type=”hidden” )，使用jQuery控制向input寫值，或控制form表單提交。

以上是利用Css+jQuery 製作下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章！