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

選択コンポーネントとして使用する場合、フォームフォームと隠しフィールド(type="hidden")を追加し、jQueryを使用して値の書き込みを制御できます入力、またはコントロール フォーム フォーム送信。

以上がCss + jQuery を使用してドロップダウン メニューを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。