Verwenden Sie CSS+jQuery, um ein Dropdown-Menü zu erstellen

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

Bei Verwendung als Auswahlkomponente können Sie Formulare hinzufügen und ausblenden Felder (type="hidden"), verwenden Sie jQuery, um das Schreiben von Werten in die Eingabe zu steuern oder die Formularübermittlung zu steuern.

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS+jQuery, um ein Dropdown-Menü zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!