dt/ddでjQueryドロップダウンメニューを再現したい

Question

前提・実現したいこと

javascript知識ほぼゼロ者です。
事情により、グローバルメニューで以下のようなHTMLの構造を変更せずに、
jQueryのドロップダウンメニューを実装したいのですが、
以下のjavascriptでは、マウスポインターが隣接する<dt>に移動した場合、<dd>はSlideUpするのですが、

<dd>の領域からマウスポインターを移動した場合、SlideUpしてくれません。 正しい記述をご教授お願いします。

該当のソースコード

<dl class="toggle">
      <dt>hoverメニュー1</dt>
      <dd>
        <ul>
          <li>ドロップダウンメニュー1</li>
          <li>ドロップダウンメニュー1</li>
          <li>ドロップダウンメニュー1</li>
        </ul>
      </dd>
      <dt>hoverメニュー2</dt>
      <dd>
        <ul>
          <li>ドロップダウンメニュー2</li>
          <li>ドロップダウンメニュー2</li>
          <li>ドロップダウンメニュー2</li>
        </ul>
      </dd>
　　　<dt>hoverメニュー3</dt>
      <dd>
        <ul>
          <li>ドロップダウンメニュー3</li>
          <li>ドロップダウンメニュー3</li>
          <li>ドロップダウンメニュー3</li>
        </ul>
      </dd>
</dl>

dd {
display:none;
}

$(function(){
	$('.toggle dt').hover(function() {
		$(this).next('.toggle dd').slideDown();
		$('.toggle dd').not($(this).next('.toggle dd')).slideUp();
	});
});

Comments

[m.ts10806]

知識0の状態でどうやってここまで組んだのでしょう。どの程度このコードを理解されてますか？

[smashdesign]

アコーディオンメニュー用のjsコードの、on clickをhoverに変更しただけのものです。なので、マウスオーバー特有の動きに対応できません。

Answer 1

メニュー(dl)の領域からマウスポインターが外れたら全部ddを閉じちゃうといいと思います。

    $('.toggle').mouseleave(function() {
        $('.toggle dd').slideUp();
    });

Comments

[smashdesign]

ご回答ありがとうございます。
以下の様にコードを直しましたが、slideDownしたddエリア（リストメニュー）にマウスオーバーすると、slideUp（メニューが閉じて）しまいます。

$(function(){
$('.toggle dt').hover(function() {
$(this).next('.toggle dd').slideDown();
$('.toggle dd').not($(this).next('.toggle dd')).slideUp();
});
$('.toggle').mouseleave(function() {
　　　$('.toggle dd').slideUp();
});
});

下記も試してみましたが、いまいち上手くslideUpしません。

$(function(){
$('.toggle dt').hover(function() {
$(this).next('.toggle dd').slideDown();
$('.toggle dd').not($(this).next('.toggle dd')).slideUp();
});
$('.toggle dd').mouseleave(function() {
　　　 $(this).slideUp();
});
});

[shun-K]

うーん、上のコードで問題ないはずなんですが。
（$('.toggle dd').slideUp();の前が全角スペースなのは気になりますが関係なさそう）

メニュー(dl)の領域からマウスポインタが外れない限りは閉じないはずです。
メニュー(dl)の領域(.toggle)がどこまでなのかわかりやすくするために
背景に色をつけて試してみてください。

.toggle {
background-color: red !important;
}