

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で質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript 画像の表示位置 3 2022/12/23 08:25
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・昔のあなたへのアドバイス
- ・字面がカッコいい英単語
- ・許せない心理テスト
- ・歩いた自慢大会
- ・「I love you」 をかっこよく翻訳してみてください
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・はじめての旅行はどこに行きましたか?
- ・準・究極の選択
- ・この人頭いいなと思ったエピソード
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・【お題】甲子園での思い出の残し方
- ・【お題】動物のキャッチフレーズ
- ・人生で一番思い出に残ってる靴
- ・これ何て呼びますか Part2
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・あなたが好きな本屋さんを教えてください
- ・かっこよく答えてください!!
- ・一回も披露したことのない豆知識
- ・ショボ短歌会
- ・いちばん失敗した人決定戦
- ・性格悪い人が優勝
- ・最速怪談選手権
- ・限定しりとり
- ・性格いい人が優勝
- ・これ何て呼びますか
- ・チョコミントアイス
- ・単二電池
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・泣きながら食べたご飯の思い出
- ・一番好きなみそ汁の具材は?
- ・人生で一番お金がなかったとき
- ・カラオケの鉄板ソング
- ・自分用のお土産
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
innerHTMLを使い、書き換えたい
-
onclickを使わずにクリック元を...
-
jQueryで同じ要素の先頭へ親要...
-
折りたたみ部分にアンカーでリ...
-
removeEventListenerについて
-
iframe内のリンクが飛ばないの...
-
クリックで色変更後に既に変更...
-
Gif画像のアニメーションが再生...
-
hide();について
-
jQueryのアコーディオンメニュ...
-
表示・非表示のスクリプトで、...
-
JSで動的にリンクを作成
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
XMLHttpRequest()で、読み込む...
-
jQueryでシンプルドラッグドロ...
-
表示・非表示の度にURLにパラメ...
-
これってJavaScriptですか??
-
javascript ループ中の処理
マンスリーランキングこのカテゴリの人気マンスリー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に含まれて...
おすすめ情報