某处的 JavaScript 更改内容和滚动菜单错误

Question

这个问题是关于 previous question 的后续问题我问(用不同的方式):

我不确定如何恰本地描述我的问题:这是一个错误，只需要调试。

这是我的 jsFiddle:http://jsfiddle.net/Wagtail/b6Juh/18/

我需要能够在元素 A、元素 B 和元素 C 上滚动，而不是在我的鼠标离开元素 A 时完全消失。为什么会发生这种情况？

为了方便起见，这里是复制过来的 JavaScript、HTML 和 CSS 代码:

HTML

<table id="headMenu">
    <tr>
        <td id="head1">Item 1</td>
        <td id="head2">Item 2</td>
        <td id="head3">Item 3</td>
    </tr>
</table>
<table id="subMenu">
    <tr>
        <td>Dynamic Content!</td>
    </tr>
</table>​

CSS 代码:

#headMenu{background:rgb(142,180,227);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:20px 5%  0px 5%%;vertical-align:middle;}
#subMenu{background:rgb(195,214,155);width:90%;height:50px;color:white;font-weight:bold;text-align:center;margin:1px 5% auto 5%;vertical-align:middle;}
#headMenu td:hover{background:rgb(162,200,240);}
#subMenu td:hover{background:rgb(210,230,170);}​

JavaScript 代码:

var a = 500, head1 = document.getElementById('head1'), subMenu = document.getElementById('subMenu'), timeout;

head1.onmouseover = function(displayMenu) {
    subMenu.innerHTML = '<tr><td>Item A</td><td>Item B</td><td>Item C</td></tr>';
    head1.onmouseout = function(getScroll) {
        subMenu.onmouseover = function(breakTimeout) {
            clearTimeout(timeout);
            subMenu.onmouseout = function(endFunction) {
                subMenu.innerHTML = '<tr><td>Dynamic Content!</td></tr>';
            };
        };
        timeout = setTimeout(function() {
            document.getElementById("subMenu").innerHTML = '<tr><td>Dynamic Content!</td></tr>';
        }, a);
    };
};

提前感谢任何答案!如果您需要说明，我很乐意回复。

Answer 1

当鼠标从一个子菜单表格单元格移动到另一个时，您的 subMenu.onmouseout 函数被触发。解决此问题的一种简单方法是为单元格之间的移动添加另一个超时。

我已经更新了您的 jsfiddle 示例以说明我的意思:

http://jsfiddle.net/b6Juh/22/