アマゾンの左のメニューのような物を作りたくて

質問

某大型掲示板のjavascript質問スレに書き込んだのですが
スルーされてしまったので、こちらに書かせていただきます。

onMouseover="openMenu(1)" onMouseout="closeMenu(1)"

function openMenu(n){
clearTimeout(CloseTime);
closeInstant();
if(n==1){
OpenTime=setTimeout('li1.style.display="block";',300);
}
if(n==2)…
}

function closeMenu(n) {
CloseTime=setTimeout('clearTimeout(OpenTime);',100);
if(n==1){
CloseTime=setTimeout('li1.style.display = "none";',300);
}
if(n==2)…
}

とやったのですが、メニュー間の移動をすると、移動先のメニューが出てきません。
clearTimeoutが効いていないような気がするのですが、初心者な物で良く分かりません…。
どなたか助けていただけませんか？

回答No.1

fujillin

回答がないみたいなので・・・

＞書き込んだのですがスルーされてしまったので、～
スルーするというよりも、皆さん（私も含めて）回答できないだけではないかと想像します。

＞アマゾンの左のメニューのような物～
とありますが、
　　http://www.amazon.co.jp/
には「左メニュー」らしきものは見当たらないし、なさりたいことが不明なので回答のしようがないのではないのかな…
質問文もコードの一部のみですし、HTMLの構成もわからないので、想像して回答しようにもヒントが少なすぎるということではないでしょうか？

ということで、表示されている内容からめいっぱい想像をたくましゅうしてみると…
・closeInstantが何を行っているのか不明ですが、それが何か悪さをしていないでしょうか？（実行時エラーをおこしていないか等）
・表示/非表示を切り替える処理だけのように見えますが、なぜわざわざsetTimeoutを利用しているのか不明です。単純に、表示/非表示の切替処理だけにすれば不具合は生じないのでは。

＞メニュー間の移動をすると、移動先のメニューが出てきません
（以下は、想像100％ですが…）
イベントのセットがどのように（どの要素に）されているのか不明ですが、mouseover、mouseoutが連続して発生すると仮定すれば、setTimeoutで指定された処理内容の前にこれらが連続して処理されることになります。

単純に、同じイベントが設定されている二つの要素間でover→out→overが0.1秒以下で発生した場合を考えてみれば、
　*closeInstantは内容が不明なので無視しています。
　*対象要素が不明なので、特定せずに考察

1）mouseover（要素1）
　(1) 以前の非表示処理をキャンセル
　(2) 表示処理を0.3秒後にセット
2）mouseout（要素1）
　(3) 表示処理のキャンセルを0.1秒後にセット
　(4) 非表示処理を0.3秒後にセット
3）mouseover（要素2）
　(5) 非表示処理をキャンセル（(4)をキャンセル）
　(6) 表示処理を0.3秒後にセット

4）約0.1秒後
　・ (3)が実行され、(6)がキャンセルされる
5）約0.3秒後
　・ (2)が実行され表示
となるので、結果的に(2)で指定された要素が表示されていませんか。
質問文には記載がありませんが、どこかのメニュー（上例では要素1のmouseoverの際に表示される要素）が表示されているのではないかと想像します。
（全てがn=1として設定されているのか、違う処理になっているのか不明ですし、n=1以外の場合どのような処理になっているのかも不明ですが…）

（↑）の順序は操作のタイミングに大いに依存するので、タイミングが異なれば違う結果になりますし、処理がもっと多重に重なった場合も同様です。
スクリプトが実行時エラーで停止しているような場合も、上記とは異なった処理内容になると考えられます。

普通のサイトであれば、ソースを見ることでどのようなHTML構成やスクリプトで処理を実現しているのかがわかりますので、サンプルサイトがあるのであれば、それを見本に作成するのが手っ取り早いと思います。