题目大意是：用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=‘‘;
}
}
时间： 2024-10-21 07:37:05