jQueryのslideToggleについて

質問

jQueryのslideToggleについて質問です。
クリックするとドロップダウンメニューが表示されるとこまではOKです。

「メニュー1」のサブメニューが開いている状態で「メニュー2」をクリックすると

・既に開いている「メニュー1」のサブメニューが閉じる
・クリックされた「メニュー2」のサブメニューが開く

としたいのですがどうすればいいのでしょうか？

■html
<nav id="global-nav">

<ul>
<li><a href="#">ホーム</a></li>
<li>
<a class="sub" href="#">メニュー1</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li>
<a class="sub" href="#">メニュー2</a>
<ul>
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
</ul>
</li>
<li><a href="#">メニュー3</a></li>
</ul>

</nav>

■js

$('a.sub').click(function(){
$('#global-nav li ul').hide();//←既に開いている場合は他を閉じる
$(this).next('ul').slideToggle('slow');
return false;
});

jsの2行目を入れることで他のサブメニューが開いている場合の問題はクリアできたのですが「メニュー1」をクリックするたびにサブメニューが開くだけで閉じることがありません^^;

回答No.1

fujillin · ベストアンサー

細かな部分で、どのような動作をイメージなさっているのかよくわからないので、とりあえずの想定で…

こんな感じで、イメージに近いものになりませんか？
（全角空白は半角に）
$(function(){
　var menus = $("#global-nav a.sub");
　menus.next("ul").hide();

　menus.click(function(){
　　var t = this;
　　menus.each(function(){
　　　if(t===this) $(this).next("ul").slideToggle("slow");
　　　else $(this).next("ul").slideUp();
　　});
　　return false;
　});
});

お礼

思っていた動作になりました！
説明不足で申し訳ございませんでしたがありがとうございました^^