2009-07-18 12 views
0

私はこのようなことをしているのかどうかはわかりませんが、jQueryで単純なドロップダウンメニューを作成しようとしています。私は基本的には...メニュー項目がホバーされると表示されるように(リンク付き)のdivをしたいクイックjQueryドロップダウンメニューを作成しようとしています

メニュー:

<ul id="mainlevel"> 
    <li><a href="#" class="mainlevel_home" ><span>Home</span></a></li> 
    <li><a href="#" class="mainlevel_feature-writers" ><span>Feature Writers</span></a></li> 
    <li><a href="#" class="mainlevel_fantasy-killed-my-hsc" ><span>Fantasy Killed My HSC</span></a></li> 
</ul> 

隠し本部:

<div class="subMenu"><a href="/feature-writers/jd-ormsby" class="sublevel jd-ormsby"><span>J.D. Ormsby</span></a></div> 

The jQuery:

$(".mainlevel_feature-writers").hover(function(){ 
    $(".subMenu").fadeIn("slow"); 
}, function() { 
    $(".subMenu").fadeOut("slow"); 
}); 

これは隠されたdivをフェードインし、うまく消してしまいますが、誰かが新しく表示されたdivの中の何かを動かすと、どのように消えるのをやめますか?

申し訳ありませんが、これは本当に明白な質問です..私はまだ学んでいます! :)

+0

メニューはうまくやるのは簡単ではありません。 superfish()や別のjQueryやCSSメニューを使うことを強くお勧めします。 – cletus

+0

Joomlaのスーパーフィッシュコンポーネントを使用しようとしましたが、個々のメニューのスタイリングに問題がありました(各メニューアイテムには特定のイメージがあります)。メニューはドロップダウンが再生されていたので、私自身がそれを書こうとしています:) – SoulieBaby

答えて

1

mouseovermouseoutイベントの処理を分ける必要があると思います。

mouseoverハンドラーを「トップレベル」メニュー要素に、mouseoutハンドラーを隠れた「ドロップダウン」div(コンフリクトを管理するいくつかの状態コード)にアタッチすることをお勧めします。

+0

はい。基本的に隠れたdivを表示する唯一のアイテムは、内部に複数のリンクを持つ.mainlevel_feature-writersです。カーソルが隠れたdivの中にある場合に待つためのフェードアウト..それが意味をなさない場合:) – SoulieBaby

関連する問題