[英]Unique JavaScript/DHTML Menu: Onmouseover/onmouseout scripting logic challenges
I am attempting to create a JavaScript menu that would employ the following HTML:我正在尝试创建一个使用以下 HTML 的 JavaScript 菜单:
<table id="mainMenu">
<tr>
<td id="mainMenu1">Item 1</td>
<td id="mainMenu2">Item 2</td>
<td id="mainMenu3">Item 3</td>
</tr>
</table>
<table id="subMenuA" style='hidden';>
<tr>
<td>Subitem A1</td>
<td>Subitem A2</td>
<td>Subitem A3</td>
</tr>
</table>
<table id="subMenuB" style='hidden';>
<tr>
<td>Subitem B1</td>
<td>Subitem B2</td>
...
When #mainMenu1 onmouseover, I want #subMenuA.style='visible'.当#mainMenu1 onmouseover 时,我想要#subMenuA.style='visible'。
When #mainMenu1 onmouseout, I want #subheaderA.style='hidden'.当#mainMenu1 onmouseout 时,我想要#subheaderA.style='hidden'。
When #subMenuA onmouseout, I want #subheaderA.style='hidden'.当#subMenuA onmouseout 时,我想要#subheaderA.style='hidden'。
Note that traditional drop-down scripts don't work because the two menus are two separate elements and there is a small distance between them.请注意,传统的下拉脚本不起作用,因为两个菜单是两个独立的元素,并且它们之间的距离很小。 It's therefore necessary to "bridge the gap" between the two elements.因此,有必要在两个元素之间“弥合差距”。 How to do this??这个怎么做??
Could anyone suggest a basic JavaScript code to get this working?任何人都可以建议一个基本的 JavaScript 代码来让它工作吗? Even just the logic/idea would be great.即使只是逻辑/想法也会很棒。 I would really appreciate it!我真的很感激!
Updated answer: http://jsfiddle.net/imsky/zcwJt/4/更新答案: http : //jsfiddle.net/imsky/zcwJt/4/
var $ = function(el) {
return document.getElementById(el)
};
var menu_timer;
$("item1").onmouseover = function() {
window.clearTimeout(menu_timer);
$("menu1").style.display = "block";
}
$("menu1").onmouseover = function() {
window.clearTimeout(menu_timer);
}
$("menu1").onmouseout = function(e) {
window.clearTimeout(menu_timer);
if (!parent(e.relatedTarget, this)) {
var menu = this;
menu_timer = window.setTimeout(function() {
menu.style.display = "none";
}, 1000)
}
}
var parent = function(el, p) {
if (!el) {
return false;
}
if (el !== p) {
while (el.parentNode) {
el = el.parentNode;
if (el == p) {
return true;
}
}
}
else {
return true;
}
return false;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.