模拟自定义下拉菜单 

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="utf-8" />
        <title></title>

    </head>

    <body>

        <style type="text/css">
            .xmkc {
                width: 600px;
                margin: 0 auto;
                text-align: center;
                position: relative;
            }
            
            .wena {
                display: block;
                border: 1px solid #ddd;
                width: 320px;
                height: 26px;
                font-size: 12px;
                line-height: 26px;
                vertical-align: middle;
                margin: 0px;
                padding: 0px;
                cursor: pointer;
            }
            
            .classlist {
                width: 320px;
                border-left: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                border-right: 1px solid #ddd;
                position: absolute;
                z-index: 1;
                left: 0px;
                top: 28px;
            }
            
            .lis {
                display: block;
                margin: 0px;
                padding: 0px;
            }
            
            .lis a {
                display: block;
                width: 320px;
                height: 20px;
                font-size: 12px;
                padding-top: 8px;
                text-align: left;
                text-decoration: none;
                color: #333;
                outline: none;
                hide-focus: expression_r(this.hideFocus=true);
            }
            
            .lis a:hover {
                text-decoration: none;
                background-color: #00f452;
                color: #fff;
            }
        </style>

        <script type="text/javascript">
            function $(x) {
                return document.getElementById(x);
               
            }

            function sh(x) {
                $(x).style.display = $(x).style.display ? "" : "none";
            }

            function gets_value(str) {
                $('whole').value = str;
                sh('hh');
            }
        </script>

        <body>

            <div class="xmkc">
                <input name="class" id="whole" type="text" class="wena" onClick="sh('hh')" value="你最喜欢吃的水果是" readonly="readonly" />

                <div id="hh" style="display:none" class="classlist">

                    <div class="lis"><a href="#" onClick="gets_value('香蕉')">香蕉</a></div>
                    <div class="lis"><a href="#" onClick="gets_value('苹果')">苹果</a></div>
                    <div class="lis"><a href="#" onClick="gets_value('梨')">梨</a></div>
                    <div class="lis"><a href="#" onClick="gets_value('水蜜桃')">水蜜桃</a></div>

                </div>
                <!--classlist -->
            </div>
            <!--xmkc -->

        </body>

</html>

 

posted @ 2016-02-20 16:43  Xpress  阅读(149)  评论(0)    收藏  举报