jQueryのアコーディオンメニューで、他をクリックした際に自動で閉めたい。

質問

JavaScript、CSS初心者のものです。
今回、jQueryのアコーディオンメニューを使用しているのですが、現状ではクリックするとメニューはうまく開くのですが、他をクリックした際にはじめにクリックした箇所が開いたままになってしまいます。
これを自動で閉じ、常に最新のクリックしたメニューのみ表示するにはどうすればよいのでしょうか？
お手数ですが、ご教示お願いします。

以下ソースを載せておきます。

◆javascript◆
<script type="text/javascript">
$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
elementVal.toggle("fast");
});
});
});
</script>

◆HTML◆
<div id="simpleAccordion">
　<h1>画像の箇所</h1>
　<h2><a href="#">クリックする箇所</a></h2>
　<div>クリックされると開く箇所</div>
　<h2><a href="#">クリックする箇所</a></h2>
　<div>クリックされると開く箇所</div>
</div>

回答No.3

fujillin · ベストアンサー

#1です。

最初の1行目で、サブメニューを閉じて（=非表示にする）いるので、それをコピペすればよいだけでは？
自作ではなかったのかな？

$(function()
{
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function(i)
{
var elementVal = $(this).next("div");

$(this).click(function()
{
$("#simpleAccordion div").hide(); //←1行追加
elementVal.toggle("fast");
});
});
});
（これだと、トグルでクリックして閉じるようにはならないので、トグルを生かしたいのなら、自分以外を閉じるようにする必要あり）

ついでにちょっとだけコンパクトにして、不用のiを削除すれば

$(function() {
$("#simpleAccordion div").hide();
$("#simpleAccordion h2").each(function() {
$(this).click(function() {
$("#simpleAccordion div").hide();
$(this).next("div").toggle("fast");
});
});
});

お礼

思っていたことができました。
ご丁寧にありがとうございます。
自作では無いので、全てを把握していませんでした。
JSの仕組みが少しずつ分かってきました。
勉強していきます。
どうもありがとうございました。

回答No.4

zeff

<script type="text/javascript">
var flaged = null;
function Test(id){
// もし開いているのが自分自身なら→自分自身を閉じる
if (flaged == id){
document.getElementById(id).style.display = 'none';
flaged = null;
}else{
// もしどれかが開いていたら→開いているものを閉じる
// どれも開いていなかったら→何もしないで次へ
if (flaged != null){
document.getElementById(flaged).style.display ='none';
}
// 自分自身を開ける
document.getElementById(id).style.display = 'block';
flaged = id;
}
}
</script>

<div id="simpleAccordion">
　<h1>画像の箇所</h1>
　<h2 onclick="Test('menu1')">クリックする箇所1</h2>
　<div id="menu1" style="display:none;">クリックされると開く箇所1</div>
　<h2 onclick="Test('menu2')">クリックする箇所2</h2>
　<div id="menu2" style="display:none;">クリックされると開く箇所2</div>
</div>

JQueryはまったくわからないのですが、
javascriptのみ（？）だとこんな流れだと思います。
何かの参考になれば。

お礼

ご丁寧にありがとうございます。
無事に思っていたことができました。
ありがとうございました。

回答No.2

totomac

ここを見れば、良いと思います。

http://ascii.jp/elem/000/000/466/466410/

参考URL：

http://ascii.jp/elem/000/000/466/466410/

お礼

ご回答ありがとうございます。
参考にさせていただきます。

回答No.1

fujillin

クリックしたときの処理を
　1）（全部の）サブメニューを閉じる
　2）クリックしたサブメニューを開く
にしてあげて、1）の部分を追加してあげればよいのでは？
（1行の追加ですみます）

最小の処理にするなら、「現在開いているサブメニューを閉じる」ですが、それだと開いている部分を記録しておくか探すかしないとならないので、このぐらいの数なら全部閉じる処理にしてしまったほうが楽ですね。

補足

ご回答ありがとうございます。
自分流にいろいろとやり直してみたのですが、うまくいきませんでした。
具体的にどこに何を記載すればよろしいのでしょうか？
初歩的な質問でしたらすみません。