Question

我正在尝试创建一个使用以下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>
    ...

当＃mainMenu1 onmouseover时，我想＃subMenuA.style ='visible'。

当#mainMenu1 onmouseout时，我想要＃subheaderA.style ='hidden' 当#subMenuA onmouseout时，我想＃subheaderA.style ='hidden'。

请注意，传统的下拉脚本不起作用，因为两个菜单是两个独立的元素，它们之间的距离很小。因此有必要“弥合两个要素之间的差距”。怎么做??

有人可以建议一个基本的JavaScript代码来实现这个吗？即使只是逻辑/想法也会很棒。我真的很感激！

Answer 1

更新的答案：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;
}

独特的JavaScript / DHTML菜单：Onmouseover / onmouseout脚本逻辑挑战

1 个答案: