用li模拟select实现下拉框

╰+攻爆jí腚メ 2022-08-19 15:09 264阅读 0赞

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    <style>
    body {padding:10px;}
    * {margin:0; padding:0; font-size:12px;}
    ul,li 
    {
    	list-style-type:none;
    }
    .Select_box {
    	width:150px; 
    	border:1px solid #ccc; 
    	padding-right:20px; 
    	padding-left:10px; 
    	position:relative;
    }
    #fisrt {
    	cursor:pointer; 
    	display:block; 
    	line-height:25px; 
    	width:100%; 
    	height:25px;
    
    	text-align:center;
    	background:url('ico-arrow.png') no-repeat 100% 50%; 
    }
    .Select_box ul li {
    	cursor:pointer;
    }
    .son_ul {
    	width:179px; 
    	position:absolute; 
    	left:0;
    	top:25px; 
    	border:1px dashed #ccc; 
    	background:url(bg.png) no-repeat 0 0; 
    	z-index:100;
    }
    .son_ul li {
    	display:block; 
    	line-height:25px; 
    	padding-left:0px; 
    	width:179px; 
    	z-index:100;
    	background:url('icon.png') no-repeat 0% 60%; 
    
    }
    .son_ul li:hover {
    	background:red url('icon.png') no-repeat 0% 60%; 
    }
    .son_ul span {
    	cursor:pointer; 
    	padding-left:40px; 
    }
    </style>
     <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.son_ul').hide(); //初始ul隐藏
            $('.Select_box span').click(function () { //鼠标移动函数
    				$(this).parent().find('ul.son_ul').slideDown();  //找到ul.son_ul显示
    				//$(this).parent().find('li').hover(function () { $(this).addClass('hover') }, function () { $(this).removeClass('hover') }); //li的hover效果
    				$(this).parent().hover(function () { },
    					 function () {
    						 $(this).parent().find("ul.son_ul").slideUp();
    					 }
    				);
    			}, function () { }
    		);
            $('ul.son_ul li').click(function () {
                $(this).parents('li').find('#fisrt').html($(this).html());
                $(this).parents('li').find('ul').slideUp();
            });
        }
     );
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    	<ul id="main_box">
    		<li class="Select_box">
    		<span id="fisrt">   请选择...</span>
    			<ul class="son_ul">
    			  <li><span>选项一</span></li>
    			  <li><span>选项二</span></li>
    			  <li><span>选项三</span></li>
    			  <li><span>选项四</span></li>
    			  <li><span>选项五</span></li>
    			</ul>
    		</li>
    	</ul>
    </form>
    </body>
    </html>