メニューに利用しているSlideToggleの多重登録を防ぎたいです

Question

やりたいこと

メニューにマウスカーソルが乗ると
slidetoggleでメニューが下に伸びるものを作ったのですが、
カーソルが手ブレでメニューに乗ったり乗らなかったりすることで
イベントが多重に登録され延々伸び縮みするのを防ぎたいです。
現状は下記の内容で動作しています。

$(function(){
		   $('.sita').hover(function(){
    $(this).children('div').slideToggle();
	},function(){
    $(this).children('div').slideToggle();
	});
});

状況・要件としては

１：一度メニューが伸びて、カーソルが離れて縮んで消えるという動作が終わるまでは、このイベントが多重に動いてほしくない

２：とはいえ、このスクリプトで動くメニューボタンは複数あり、ボタン１のメニューが伸び縮みしている間はボタン２のメニューが動かない、では問題がある

という状況です。

２：については一個一個クラスを変えればなんとでもなるので優先順位は低いのですが、
１：についてはどうにかしなければならない状況になっています。

詳しい方、どなたかご教授お願いいたします。

Comments

[yambejp]

HTMLを提示ください

[Euri_K]

<div id="gnavi">
<ul>
<li id="link01" class="sita"><a href="～～">メニュー1</a><div>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#FBFBFB" align="center"><strong><a href="～～">小メニュー1</a></strong></td>
</tr>
<tr>
<td bgcolor="#FBFBFB" align="center"><strong><a href="～～">小メニュー2</a></strong></td>
</tr>
</table>
</div></li>
<li id="link02" class="sita02"><a href="～～">メニュー2</a><div>
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td bgcolor="#FBFBFB" align="center"><strong><a href="～～">小メニュー1</a></strong></td>
</tr>
<tr>
<td bgcolor="#FBFBFB" align="center"><strong><a href="～～">小メニュー2</a></strong></td>
</tr>
<tr>
<td bgcolor="#FBFBFB" align="center"><strong><a href="～～">小メニュー3</a></strong></td>
</tr>
</table>
</div></li>
<li id="link03"><a href="～～">メニュー3</a></li>
<li id="link04"><a href="～～">メニュー4</a></li>
<li id="link05"><a href="～～">メニュー5</a></li>
</ul>
</div>

このような感じで、ナビゲーションの特定のボタンだけ更にナビゲーションが用意されている構造です。
いろいろ考えたのですが、これ以上要件をややこしくしても仕方ないので上記の「２：」はクラス自体をサブメニューの数だけ増やして対応することにしました。

[yambejp]

２番目のliはclass="sita02"ではなくclass="sita"ですか？
いずれにしても私の回答で解決しませんか？

[Euri_K]

コードが冗長になるとは思いますが、クラスを同じにすることで変な巻き込みが発生するとややこしくなるので、一旦クラスを分け同じ挙動のスクリプトを２つ書くことにしました。要件に書きました「２：」についてはこれで回避できますので、「１：」についてのみアドバイスいただければ幸いです。

[yambejp]

よく状況がわからないのですが私の回答が「１：」の回避を実現していませんか？

[Euri_K]

すみません、投稿が前後して申し訳ないです。ご提示ありがとうございます。
頂いたコードも試してみたのですが、多重にイベントが発生する状況になると、カーソルが離れていても２回目のslidedownまでは発生し、そこで動作が一旦ストップします。再度カーソルを載せて離すとslideupが発生してメニューが消えるのですが、jqueryだとやはり処理の中断などのあまり細かい挙動には向いていないのでしょうか…。

Answer 1

slideToggleなどの、animate関連の処理を中断させる、
stopメソッドを使うと、イベントの二重実行を防ぐことができます。

$(function(){

$('.sita').hover(function(){
  $(this).children('div').stop().slideToggle();
},function(){
  $(this).children('div').stop().slideToggle();
});

});

Comments

[Euri_K]

回答ありがとうございます。どうやらお客様的にはこちらの動作がしっくり来るようで、これでOKをいただきました。
完全に変わった要件でもなんでもなく私の初歩的な知識不足で申し訳ないです。

[miyabi_pudding]

解決されて何よりです。
謝ることはないとないです。
私も、同じ現象に悩んだ時があったので、その経験を生かすことができてうれしいです。
今回は、実際にはイベントが二重登録されているわけではない状態ですが、
他にも、本当に、イベントが二重登録されて二回以上実行されるパターンがあったりするので、バグが出た時に、可能性の一つとして、頭に入れておくと、対応しやすくなると思います。
（質問の要件ではないので、ここまでにしておきます）

Answer 2

例えばこんな感じ？

<script>
$(function(){
  $('.sita div').hide();
  $('.sita').hover(function(){
    if($(this).find('div').is(':not(:visible)')){
      $(this).children('div').slideDown();
    }
  },function(){
    $(this).children('div').slideUp();
  });
});
</script>
<div class="sita">
<span>1</span>
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</div>
<div class="sita">
<span>2</span>
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
<div class="sita">
<span>3</span>
<div>3-1</div>
<div>3-2</div>
<div>3-3</div>
</div>

Comments

[Euri_K]

挙動としては、別で投稿頂いたmiyabi_takatsukさんのものがお客様の要望に近かったようです。
私の初歩的な知識不足で申し訳ないです。
いろいろとご提示いただいてありがとうございます。