1

我正在尝试创建一个使用以下 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 代码来让它工作吗？即使只是逻辑/想法也会很棒。我真的很感激！

4

1 回答 1

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;
}
于 2012-06-06T03:18:52.397 回答