利用Css+jQuery 製作下拉式功能表

來源:互聯網
上載者:User

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表單提交。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.