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' が必要です。

従来のドロップダウン スクリプトは機能しないことに注意してください。これは、2 つのメニューが 2 つの別個の要素であり、その間にわずかな距離があるためです。したがって、2 つの要素の間の「ギャップを埋める」必要があります。これを行う方法？？

これを機能させるための基本的な 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 に答える