模拟一个类似select的效果

来源：互联网发布：预算员找工作知乎编辑：程序博客网时间：2024/05/29 15:50
<!DOCTYPE HTML><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>模拟一个下拉列表的效果</title>        <style type="text/css">* {margin:0;padding:0;}        div#nav {            border:1px solid green; width:100px;height:20px;margin-left:1px;line-height:20px;padding-left:5px;position:relative;}ul#list {list-style:none;position:absolute;    left:5px;width:100px;display:none;}ul#list li {border:1px solid green;border-bottom:0;border-top:0;width:100px;padding-left:5px;margin-left:-6px;}ul#list li.last {border-bottom:1px solid green;}ul#list li:hover {background-color:#eee;}button#btn {position:absolute;left:120px;top:2px;}        </style><script>window.onload = function() {var i;var nav = document.getElementById('nav');var ul = document.getElementById('list');var show = document.getElementById('nav').childNodes[1];var lis = document.getElementsByTagName("li");for(i=0;i<lis.length;i++){lis[i].onclick = function() {var txt = this.innerHTML;show.innerHTML = txt;ul.style.display = "none";}}nav.onmouseover = function() {ul.style.display = "block";}}</script>    </head>    <body>        <div id=nav><span>请选择</span><ul id="list"><li>网页</li><li>电影</li><li>游戏</li><li class='last'>贴吧</li></ul></div>    </body></html>
0 0