

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ベストアンサー
- 回答日時:
#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
- 回答日時:
<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
- 回答日時:
ここを見れば、良いと思います。
http://ascii.jp/elem/000/000/466/466410/
参考URL:http://ascii.jp/elem/000/000/466/466410/
No.1
- 回答日時:
クリックしたときの処理を
1)(全部の)サブメニューを閉じる
2)クリックしたサブメニューを開く
にしてあげて、1)の部分を追加してあげればよいのでは?
(1行の追加ですみます)
最小の処理にするなら、「現在開いているサブメニューを閉じる」ですが、それだと開いている部分を記録しておくか探すかしないとならないので、このぐらいの数なら全部閉じる処理にしてしまったほうが楽ですね。
この回答への補足
ご回答ありがとうございます。
自分流にいろいろとやり直してみたのですが、うまくいきませんでした。
具体的にどこに何を記載すればよろしいのでしょうか?
初歩的な質問でしたらすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
jqueryでajaxな読み込み+切り替え
-
<html><head>
-
createElementで作成した要素を...
-
指定したパスが現URLに含まれて...
-
iframe内からjQueryで指定したい
-
javascriptでオブジェクトの重...
-
Jquery 親要素で順番入れ替え
-
jquery.cookie.js を使って縦に...
-
URL末尾に特定の文字を含む場合...
-
クリックで色変更後に既に変更...
-
【HP作成】クリックすると下...
-
サムネイル画像をマウスオーバ...
-
div要素をランダムに表示させたい
-
1枚の画像をクリックすると複数...
-
javascriptでわからない所があ...
-
CSS <div>の入れ子が反映さ...
-
div要素を半透明にして且つ外枠...
-
javascriptによる画像切り替え...
-
jQuery FlexSliderのカルーセ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
jQueryで同じid属性が複数あっ...
-
IFRAMEの表示/非表示を切り替え...
-
iframe内のリンクが飛ばないの...
-
表示・非表示のスクリプトで、...
-
removeEventListenerについて
-
jQueryで特定id以外の下にある...
-
createElementで作成した要素を...
-
JSで動的にリンクを作成
-
リンク色を動的に変更したい。i...
-
CSSで指定したwidthをマウスで...
-
getElementByIdの戻り値がnull...
-
背景色を透明化
-
jQueryでクリックされた要素のi...
-
onMouseoverを利用して、セル内...
-
バッチファイルでカウントアッ...
-
【HP作成】クリックすると下...
-
指定したパスが現URLに含まれて...
おすすめ情報