87,904
社区成员
发帖
与我相关
我的任务
分享js下拉菜单问题
想问个菜单父级mouseout事件的问题，mouseout分为两种情况：一是从父级移出到该父级对应的子级上，另一种是从父级移出不在子级上，实现的效果分别是从父级移出继续保持子级打开状态，和从父级移出隐藏子级。
对应的父级项mouseout事件隐藏子级的定义为：
搞不明白为什么一种隐藏定义会出现两种效果，大大们能给我解释下吗？
下面是完整的例子代码
对应的父级项mouseout事件隐藏子级的定义为：
if (mainID == "Tdiv") {
if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
else { eval("hidediv(" + "Div" + numID + ")"); }
}
function hidediv(obj) { //隐藏下拉列表
nbottom = 0;
obj.style.display = "none";
}
搞不明白为什么一种隐藏定义会出现两种效果，大大们能给我解释下吗？
下面是完整的例子代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<style type="text/css">
.menubar
{
position: absolute;
top: 10px;
width: 100px;
height: 20px;
cursor: default;
border-width: 1px;
border-style: outset;
color: #99FFFF;
background: #669900;
}
.menu
{
position: absolute;
top: 32px;
width: 140px;
display: none;
border-width: 2px;
border-style: outset;
border-color: white sliver sliver white;
background: #333399;
padding: 15px;
}
.menu A
{
text-decoration: none;
color: #99FFFF;
}
.menu A:hover
{
color: #FFFFFF;
}
</style>
<script language="javascript">
function divControl(show) { //判断是否显示相对应的下拉列表
window.event.cancelBubble = true;
var objID = event.srcElement.id;
var index = objID.indexOf("_");
var mainID = objID.substring(0, index);
var numID = objID.substring(index + 1);
if (mainID == "Tdiv") {
if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
else { eval("hidediv(" + "Div" + numID + ")"); }
}
}
var nbottom = 0, speed = 2;
function displayMenu(obj) { //在显示下拉菜单时,以下拉方式显示下拉菜单
obj.style.clip = "rect(0 100% " + nbottom + "% 0)";
nbottom += speed;
if (nbottom <= 100) {
timerID = setTimeout("displayMenu(" + obj.id + "),1");
}
else clearTimeout(timerID);
}
function showdiv(obj) { //显示下拉列表
obj.style.display = "block";
obj.style.clip = "rect(0 0 0 0)";
nbottom = 5;
displayMenu(obj);
}
function hidediv(obj) { //隐藏下拉列表
nbottom = 0;
obj.style.display = "none";
}
function keepstyle(obj) { //在下拉菜单中移动时,保持下拉列表的样式
obj.style.display = "block";
}
</script>
<table border="0" width="400" cellspacing="0" cellpadding="0" style="font-size: 15px">
<tr>
<td width="20%">
<div align="center" id="Tdiv_1" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
教育网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_2" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
电脑丛书网站
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_3" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
新出图书
</div>
</td>
<td width="20%">
<div align="center" id="Tdiv_4" class="menubar" onmouseover="divControl(1)" onmouseout="divControl(0)">
其它网站
</div>
</td>
</tr>
</tr>
<tr>
<td width="20%">
<div align="left" id="Div1" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="#">重庆XX大学</a><br>
<a href="#">长春XX大学</a><br>
<a href="#">吉林XX大学</a>
</div>
</td>
<td width="20%">
<div align="left" id="Div2" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="http://www.mingrisoft.com">明日科技VB图书</a><br>
<a href="http://www.mingrisoft.com">明日科技Delphi图书</a><br>
<a href="http://www.mingrisoft.com">明日科技Java图书</a>
</div>
</td>
<td width="20%">
<div align="left" id="Div3" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="http://www.mingrisoft.com">Delphi XX图书</a><br>
<a href="http://www.mingrisoft.com">VB XX图书</a><br>
<a href="http://www.mingrisoft.com">Java XX图书</a>
</div>
</td>
<td width="20%">
<div align="left" id="Div4" class="menu" onmouseover="keepstyle(this)" onmouseout="hidediv(this)">
<a href="http://www.mingrisoft.com">明日科技主页</a><br>
<a href="http://www.mingrisoft.com">明日科技图书网</a><br>
<a href="http://www.mingrisoft.com">明日技术支持网</a></div>
</td>
</table>
</body>
</html>
...全文
请发表友善的回复…
发表回复
unhappy1234567 2010-02-10
- 打赏
- 举报
能不能说说mouseout事件的两种情况(父->子和父->其它)具体执行流程
shan1119 2010-02-10
- 打赏
- 举报
onmouseover="divControl(1)" numID:1
onmouseout="divControl(0)" numID:0
if (mainID == "Tdiv") {
if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
else { eval("hidediv(" + "Div" + numID + ")"); }
}
onmouseout="divControl(0)" numID:0
if (mainID == "Tdiv") {
if (show == 1) { eval("showdiv(" + "Div" + numID + ")"); }
else { eval("hidediv(" + "Div" + numID + ")"); }
}
changshoujun 2010-02-10
- 打赏
- 举报
lz重新下个js 菜单。
function displayMenu(obj) { //在显示下拉菜单时,以下拉方式显示下拉菜单
obj.style.clip = "rect(0 100% " + nbottom + "% 0)";//这句不执行，暂未找到问题。
nbottom += speed;
if (nbottom <= 100) {
timerID = setTimeout("displayMenu(" + obj.id + "),1");
}
else clearTimeout(timerID);
}
unhappy1234567 2010-02-10
- 打赏
- 举报
谢谢1楼的支持,大大们快来看看问题吧
itliyi 2010-02-10
- 打赏
- 举报
sf 帮顶 哥们，请不要恶意灌水 fuck csdn
