标签：
题目大意是：用html、css和JS模拟下拉列表的实现。
HTML：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/select.css"> <title>模拟下拉列表</title> </head> <body> <form action="" method="post"> <div id="divselect"> <div id="select"><span id="txt">请选择</span><span id="arrow"></span></div > <ul id="option"> <li><a href="javascript:;" selectid="1">导航菜单</a></li> <li><a href="javascript:;" selectid="2">焦点幻灯片</a></li> <li><a href="javascript:;" selectid="3">广告代码</a></li> <li><a href="javascript:;" selectid="4">网页特效</a></li> <li><a href="javascript:;" selectid="5">jquery特效</a></li> </ul> </div> </form> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/select.js"></script> </body> </html>
CSS：
body, ul, li { margin: 0; padding: 0; font-size: 13px; } ul, li { list-style: none; } #divselect { width: 186px; margin: 80px auto; position: relative; z-index: 10000; } #divselect div { width: 150px; height: 24px; line-height: 24px; display: block; color: #807a62; cursor: pointer; font-style: normal; padding-left: 4px; padding-right: 30px; border: 1px solid #333333; } #divselect ul { width: 184px; border: 1px solid #333333; background-color: #ffffff; position: absolute; z-index: 20000; margin-top: -1px; display: none; } #divselect ul li { height: 24px; line-height: 24px; } #divselect ul li a { display: block; height: 24px; color: #333333; text-decoration: none; padding-left: 10px; padding-right: 10px; } #divselect ul li a:hover { background-color: #CCC; } #arrow { display: block; content: ‘‘; border-color: #ccc transparent transparent transparent; border-style: solid; border-width: 9px; height: 0px; width: 0px; position: absolute; right: 1%; top: 40% } #select{ position:relative }
JS：
var select=document.getElementById(‘select‘); var option=document.getElementById(‘option‘); var txt=document.getElementById(‘txt‘); select.onclick=function(ev){ ShowOrHide(); } /*A点击事件委托在UL上完成*/ option.onclick=function(ev){ var e=ev||window.event; var target=e.target||e.srcElement; if(target.nodeName.toUpperCase()=="A"){ txt.innerHTML=target.innerHTML; ShowOrHide(); } } function ShowOrHide(){ if(option.style.display==‘‘) { option.style.display=‘block‘; } else{ option.style.display=‘‘; } }
标签：
原文地址：http://www.cnblogs.com/hjy920124/p/5827176.html
