とあるサイトを参考にアコーディオンメニューを作成しています。
おおよその動作はうまくいっているのですが、1点どうしても実装できません。
例えば、menu2.htmlへ遷移した場合は、<ul class="menu2">内のメニューは
閉じることなく開いたままにしておきたいのです。他のページへ遷移した場合も同様です。
該当ページへ遷移した時に該当メニューのクラス名を変えること(open→block)で読み込み時は開いたままになるようになりましたが、他のメニューをクリックすると該当ページメニューも閉じてしまいます。
メニュー部分を開いたまま保てる方法をどなたかご教授いただけませんでしょうか。
何卒よろしくお願いいたします。
---------------------------------------
html
<ul class="acc">
<li>
<h3 class="h3_menu1 open"><a href="#">Menu1</a></h3>
<ul class="menu1">
<li class="menu1_1"><a href="menu1_1.html">Menu1_1</a></li>
<li class="menu1_1"><a href="menu1_2.html">Menu1_2</a></li>
<li class="menu1_1"><a href="menu1_3.html">Menu1_3</a></li>
<li class="menu1_1"><a href="menu1_4.html">Menu1_4</a></li>
<li class="menu1_1"><a href="menu1_5.html">Menu1_5</a></li>
</ul>
</li>
<li>
<h3 class="h3_menu2 block"><a href="#">Menu2</a></h3>
<ul class="menu2">
<li class="menu2_1"><a href="menu2.html#Menu3_1">Menu2_1</a></li>
<li class="menu2_2"><a href="menu2.html#Menu3_2">Menu2_2</a></li>
<li class="menu2_3"><a href="menu2.html#Menu3_3">Menu2_3</a></li>
<li class="menu2_4"><a href="menu2.html#Menu3_4">Menu2_4</a></li>
<li class="menu2_5"><a href="menu2.html#Menu3_5">Menu2_5</a></li>
</ul>
</li>
<li>
<h3 class="h3_menu3 open"><a href="#">Menu3</a></h3>
<ul class="menu3">
<li class="menu3_1"><a href="menu3.html#Menu3_1">Menu3_1</a></li>
<li class="menu3_2"><a href="menu3.html#Menu3_2">Menu3_2</a></li>
<li class="menu3_3"><a href="menu3.html#Menu3_3">Menu3_3</a></li>
<li class="menu3_4"><a href="menu3.html#Menu3_4">Menu3_4</a></li>
</ul>
</li>
</ul>
jQuery
var $j = jQuery;
$j(function(){
$j(".acc").each(function(){
$j("h3.open", this).each(function(index){
var $this = $j(this);
if(index > 0) {
$j("h3.open").next().hide();
} else {
$j(".menu1").hide();
}
$this.click(function(){
var params = {height:"toggle", opacity:"toggle"};
$j(this).next().animate(params).parent().siblings()
.children("ul:visible").animate(params,{complete: function(){$j("h3.block").css("display","block");}});
return false;
});
});
});
});
No.2ベストアンサー
- 回答日時:
#1です。
>animateのなめらかな表示非表示は維持させてたいです。
animateでも、slideでも同じはずですが・・・?
(確認はしていませんが、結局同じ処理にいっているはずと思います)
そういえば、こんなのもありましたね。
http://oshiete.goo.ne.jp/qa/7361644.html
まぁ、内容的にanimateで定義なさりたい場合は、slideの部分を入替えればすむはずです。
animateに代えても同じみたいですが、速度を早くすれば目立たなくなるかと。
あるいは、メニュー自体をabsoluteで表示したり、easingを指定してごまかす(?)とか…
#1では無駄な部分があったので…
$(function(){
var params = {height:"toggle", opacity:"toggle"};
$(".acc h3.open").click(function(){
$(this).next().animate(params, 200).parent().siblings().find("h3.open").next(":visible").animate(params, 200);
}).next().hide();
});
No.1
- 回答日時:
コードを見てもいまひとつ意図がよく理解できないのですが、
classにopenの指定があるものだけ動作して、ないものは動作しないという解釈でよいのでしょうか?
(ないものをクリックした特は、他に何も処理しないということでよいのかなぁ)
よくわからないけれど、こんなのでもよいのだろうか?
(全角空白は半角に)
var $j = jQuery;
$j(function(){
$j(".acc").each(function(){
$j("h3.open", this).next().hide().end().click(function(){
$j(this).next().slideToggle().parent()
.siblings().find("h3.open").next().slideUp();
});
});
});
この回答への補足
fujillin様
ご回答いただきありがとうございます。
説明が足りずに申し訳ありません。
おっしゃる通りでclassがopenのものはアコーディオンメニューが適用されて
class名がblockのものには適用せず、表示を固定したいです。
いただきましたサンプルで試したところ表示・非表示自体は思い通りの動きだったのですが
animateがないことでカクカクした動きになってしまいましたのでできればanimateのなめらかな表示非表示は維持させてたいです。
もし他に解決策があれば、ご教授いただけませんでしょうか。
引き続きよろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- HTML・CSS htmlについて質問です! 写真のように写真の部分が?になってしまいます。 ファイルもしっかり選べて 1 2023/07/09 21:17
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- その他(IT・Webサービス) html cssについて 3 2023/05/13 12:48
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/12】 急に朝起こしてきた母親に言われた一言とは?
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・好きな「お肉」は?
- ・あなたは何にトキメキますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
div要素をランダムに表示させたい
-
jquery ドロップダウンメニュー...
-
pythonのDjangoでHTML内で変数...
-
ネストされたチェックボックス...
-
タブ切り替えの初期表示について
-
JavaScriptで、?マークとコロ...
-
DOM の 要素の数え方について
-
SeleniumBasicのエラー対策を教...
-
jQueryについて教えてください
-
jqueryについて
-
MAX関数を使ってからLEFT JOIN...
-
textareaに画像を表示したい
-
CSS <div>の入れ子が反映さ...
-
jspでcssが読み込めない
-
表示・非表示のスクリプトで、...
-
Ctrl+F(検索)の窓を出したいの...
-
jqueryを使って無駄なspanタグ...
-
c++std::string型をTCHARに変換...
-
Javascriptで指定した日付と時...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
「jQuery」アコーディオンメニ...
-
jQueryのeqで最後からn番目以降...
-
jquery ドロップダウンメニュー...
-
javascriptでフォーカスを当て...
-
タブ切り替えの初期表示について
-
クリックした<a>タグのみにClas...
-
Jquery の slide.toggle で要素...
-
大量のチェックボックス状態取...
-
javascriptでEnterキーをtabキ...
-
jQuery タブメニューへのダイ...
-
javascriptで、クリックしたら...
-
jQueryでネスト構造の<li>がク...
-
展開メニューの修正
-
ネストされたチェックボックス...
-
jQueryのhide,showで中の要素が...
-
gridstack.jsについて教えてく...
-
jQuery アコーディオンメニュー...
-
多階層ドロップダウンのスマホ...
-
戻ってきた時ツリーメニューが...
おすすめ情報