位置：首页>> 网络编程>> 网页设计>> 通用的下拉菜单__用DL\\DD\\DT解决无法遮住select的问题

通用的下拉菜单__用DL\\DD\\DT解决无法遮住select的问题

作者：zishu　来源：zishu blog　发布时间：2008-07-28 13:28:00　

标签：菜单,下拉,select,css

前几天写了一个ajax的，总感觉代码比较多，今天晚上又得写了一下，感觉代码还是比较多，但还好的是，比较通用。谁有办法优化一下当然好。

写的过程，还是从后向前写，先写HTML部分，希望是一个什么样子的。想来想去，其它用dl\dt\dd来作，再好不过了；

IE6，IE7，firefox我都测过没有问题！

程序代码

<dl>
<dt></dt>
<dd></dd>
</dl>

以下是全部的代码：

程序代码

<dl>
    <dt onclick="AjaxSelectBox(this)">------------请选择------------ </dt>
    <dd style="display:none">//这里如果作成AJAX的，可以为空；
      <ul>
        <li value="1">this is 001.</li>
        <li value="2">this is 002.</li>
        <li value="3">this is 003.</li>
      </ul>
      <input type="hidden" value="" /> //存放选中后的value
    </dd>
  </dl>

AjaxSelectBox()用来重新set一下li中的行为。

程序代码

function AjaxSelectBox(v){
var dl = v.parentNode;
var dd = dl.getElementsByTagName("dd")[0];
var dt = dl.getElementsByTagName("dt")[0];
var lis = dl.getElementsByTagName("li");
var html = '';
for(var y=0; y<lis.length; y++){
html += '<li onclick="SetSelectInput(this,1);" onmouseout="SetSelectInput(this,2);" onmousemove="SetSelectInput(this,3);" value="'+lis[y].value+'">' + lis[y].innerHTML + '</li>';
}
dl.getElementsByTagName("ul")[0].innerHTML = html;
dd.style.display = "block";
dl.onmouseout = function() {dd.style.display = "none";}
dd.onmouseover = function() {dd.style.display = "block";}
}

SetSelectInput();是点击后的行为；

程序代码

function SetSelectInput(v,flag){
var dl = v.parentNode;
while(dl.nodeName != 'DL'){
  dl = dl.parentNode;
}
var input = dl.getElementsByTagName("input")[0];
var dd = dl.getElementsByTagName("dd")[0];
var dt = dl.getElementsByTagName("dt")[0];
dd.onmouseover = function() {dd.style.display = "block";}
v.onmouseover = function() {dd.style.display = "block";}
dd.onmouseout = function() {dd.style.display = "none"}
if(flag == 1){
  input.value = v.attributes.getNamedItem("value").value;
  dt.innerHTML = v.innerHTML;
  dd.style.display = "none";
} else if(flag == 2){
  v.className = 'out'; return;
} else{
  v.className = 'move'; return;
}
}

CSS部分写的比较广，只要在FORM中都生效；

程序代码

<style>
*{ margin:0; padding:0}
body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}
form dt{ background:url(/file/UploadPic/20087/28/2008728133512977.gif) no-repeat left center;
width:193px;cursor:default; padding-left:5px;}form .out{ background:#FFFFFF; color:#000000;}
form .move{ background:#000066; color:#FFFFFF}
form dl{text-align:left;}
form dd{ border:1px solid #000;position:absolute; width:195px; overflow:hidden;background:#fff; margin-top:-3px;}
form dd li{cursor:default; width:100％; padding-left:5px;}
</style>

效果如下：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.zishu.cn</title><style>*{ margin:0; padding:0}body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}form dt{ background:url(/file/UploadPic/20087/28/2008728133512977.gif) no-repeat left center; width:193px;cursor:default; padding-left:5px;}form .out{ background:#FFFFFF; color:#000000;}form .move{ background:#000066; color:#FFFFFF}form dl{text-align:left;}form dd{ border:1px solid #000;position:absolute; width:195px; overflow:hidden;background:#fff; margin-top:-3px;}form dd li{cursor:default; width:100％; padding-left:5px;}</style></head><body><script language="javascript">function AjaxSelectBox(v){ var dl = v.parentNode; var dd = dl.getElementsByTagName("dd")[0]; var dt = dl.getElementsByTagName("dt")[0]; var lis = dl.getElementsByTagName("li"); var html = ''; for(var y=0; y<lis.length; y++){ html += '<li onclick="SetSelectInput(this,1);" onmouseout="SetSelectInput(this,2);" onmousemove="SetSelectInput(this,3);" value="'+lis[y].value+'">' + lis[y].innerHTML + '</li>'; } dl.getElementsByTagName("ul")[0].innerHTML = html; dd.style.display = "block"; dl.onmouseout = function() {dd.style.display = "none";} dd.onmouseover = function() {dd.style.display = "block";}}function SetSelectInput(v,flag){ var dl = v.parentNode; while(dl.nodeName != 'DL'){ dl = dl.parentNode; } var input = dl.getElementsByTagName("input")[0]; var dd = dl.getElementsByTagName("dd")[0]; var dt = dl.getElementsByTagName("dt")[0]; dd.onmouseover = function() {dd.style.display = "block";} v.onmouseover = function() {dd.style.display = "block";} dd.onmouseout = function() {dd.style.display = "none"} if(flag == 1){ input.value = v.attributes.getNamedItem("value").value; dt.innerHTML = v.innerHTML; dd.style.display = "none"; } else if(flag == 2){ v.className = 'out'; return; } else{ v.className = 'move'; return; } }</script><form> <dl> <dt onclick="AjaxSelectBox(this)">------------请选择------------ </dt> <dd style="display:none"> <ul> <li value="1">this is 001.</li> <li value="2">this is 002.</li> <li value="3">this is 003.</li> <li value="4">this is 004.</li> <li value="5">this is 005.</li> <li value="6">this is 006.</li> <li value="7">this is 007.</li> <li value="8">this is 008.</li> <li value="9">this is 009.</li> <li value="10">this is 010.</li> </ul> <input type="hidden" value="" /> </dd> </dl></form></body></html>

多放几个也没有问题：

<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.zishu.cn</title><style>*{ margin:0; padding:0}body{ font-family:Verdana; font-size:12px; line-height:1.8; padding:50px;}form dt{ background:url(/file/UploadPic/20087/28/2008728133512977.gif) no-repeat left center; width:193px;cursor:default; padding-left:5px;}form .out{ background:#FFFFFF; color:#000000;}form .move{ background:#000066; color:#FFFFFF}form dl{text-align:left;}form dd{ border:1px solid #000;position:absolute; width:195px; overflow:hidden;background:#fff; margin-top:-3px;}form dd li{cursor:default; width:100％; padding-left:5px;}</style></head><body><script language="javascript">function AjaxSelectBox(v){ var dl = v.parentNode; var dd = dl.getElementsByTagName("dd")[0]; var dt = dl.getElementsByTagName("dt")[0]; var lis = dl.getElementsByTagName("li"); var html = ''; for(var y=0; y<lis.length; y++){ html += '<li onclick="SetSelectInput(this,1);" onmouseout="SetSelectInput(this,2);" onmousemove="SetSelectInput(this,3);" value="'+lis[y].value+'">' + lis[y].innerHTML + '</li>'; } dl.getElementsByTagName("ul")[0].innerHTML = html; dd.style.display = "block"; dl.onmouseout = function() {dd.style.display = "none";} dd.onmouseover = function() {dd.style.display = "block";}}function SetSelectInput(v,flag){ var dl = v.parentNode; while(dl.nodeName != 'DL'){ dl = dl.parentNode; } var input = dl.getElementsByTagName("input")[0]; var dd = dl.getElementsByTagName("dd")[0]; var dt = dl.getElementsByTagName("dt")[0]; dd.onmouseover = function() {dd.style.display = "block";} v.onmouseover = function() {dd.style.display = "block";} dd.onmouseout = function() {dd.style.display = "none"} if(flag == 1){ input.value = v.attributes.getNamedItem("value").value; dt.innerHTML = v.innerHTML; dd.style.display = "none"; } else if(flag == 2){ v.className = 'out'; return; } else{ v.className = 'move'; return; } }</script><form> <dl> <dt onclick="AjaxSelectBox(this)">------------请选择------------ </dt> <dd style="display:none"> <ul> <li value="1">this is 001.</li> <li value="2">this is 002.</li> <li value="3">this is 003.</li> <li value="4">this is 004.</li> <li value="5">this is 005.</li> <li value="6">this is 006.</li> <li value="7">this is 007.</li> <li value="8">this is 008.</li> <li value="9">this is 009.</li> <li value="10">this is 010.</li> </ul><input type="hidden" value="" /> </dd> </dl> <dl> <dt onclick="AjaxSelectBox(this)">------------请选择------------ </dt> <dd style="display:none"> <ul> <li value="1">this is 001.</li> <li value="2">this is 002.</li> <li value="3">this is 003.</li> <li value="4">this is 004.</li> <li value="5">this is 005.</li> <li value="6">this is 006.</li> <li value="7">this is 007.</li> <li value="8">this is 008.</li> <li value="9">this is 009.</li> <li value="10">this is 010.</li> </ul><input type="hidden" value="" /> </dd> </dl> <dl> <dt onclick="AjaxSelectBox(this)">------------请选择------------ </dt> <dd style="display:none"> <ul> <li value="1">this is 001.</li> <li value="2">this is 002.</li> <li value="3">this is 003.</li> <li value="4">this is 004.</li> <li value="5">this is 005.</li> <li value="6">this is 006.</li> <li value="7">this is 007.</li> <li value="8">this is 008.</li> <li value="9">this is 009.</li> <li value="10">this is 010.</li> </ul> <input type="hidden" value="" /> </dd> </dl></form></body></html>

这样可以解决，无法把select给遮住的问题，而且可以作更多的效果出来。而且javascript不用改，CSS部分也不用改。HTML只要按DL、DT、DD的格式去写就可以了。

投稿

通用的下拉菜单__用DL\\DD\\DT解决无法遮住select的问题

猜你喜欢