Q&A
> ですが、メニューが全く開かない状態になりました。
要素のセレクターは間違っていないのにaddclassによるopenが付かないという意味ですか？
前提条件・したいこと
- index.htmlからアコーディオンメニューを【メイン・サブ・リスト】の順で開きます。
- リストのリンクをクリックして、画面に遷移します。
- 遷移したリストから、アコーディオンメニューのindex.htmlに戻ります。
-
- で開いた特定のアコーディオンメニューがリストまで開かれています。
例
・初期状態
main menu 1
main menu 2
・初期状態からsub list 1-1-1を開いて、戻った時の状態
main menu 1
sub menu 1-1
sub list 1-1-1 <- 初期状態の時に、ここを開いた
sub list 1-1-2
sub menu 2-1
main menu 2
問題点
前提条件4. にて、前提条件1. で開いたアコーディオンリストが閉じた状態になっています。
ソース
index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <title>test</title> 10</head> 11 12<body> 13 <ul class="accordionBox"> 14 <li> 15 <h3>main menu 1</h3> 16 <ul class="subMenu"> 17 <li> 18 <h4>sub menu 1-1</h4> 19 <ul class="subList"> 20 <li><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li> 21 <li><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li> 22 </ul> 23 </li> 24 <li> 25 <h4>sub menu 1-2</h4> 26 <ul class="subList"> 27 <li><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li> 28 <li><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li> 29 </ul> 30 </li> 31 </ul><!-- subMenu --> 32 </li> 33 <li> 34 <h3>main menu 2</h3> 35 <ul class="subMenu right"> 36 <li> 37 <h4>sub menu 2-1</h4> 38 <ul class="subList"> 39 <li><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a></li> 40 <li><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li> 41 </ul> 42 </li> 43 <li> 44 <h4>sub menu 2-2</h4> 45 <ul class="subList"> 46 <li><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li> 47 <li><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li> 48 </ul> 49 </li> 50 </ul><!-- subMenu --> 51 </li> 52 </ul><!-- accordionBox --> 53</body> 54</html>
sub_list_1-1-1.html ～ sub_list_2_2_2.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>sub_list_1-1-1</title> 8</head> 9<body> 10 sub_list_1-1-1<br> 11 <a href="index.html">戻る</a> 12</body> 13</html>
javascript
1$(function() { 2 $("ul.subMenu").hide(); 3 $("ul.subList").hide(); 4 5 // let hash = location.hash; 6 // $('#' + hash).next("ul.accordionBox").addClass('open'); 7 // $('#' + hash).next("ul.subMenu").addClass('open'); 8 // $('#' + hash).next("ul.subList").addClass('open'); 9 // $('ul.subList:not(.open)').hide(); 10 11 $("ul.accordionBox h3").click(function() { 12 $(this).next("ul.subMenu").slideToggle('fast'); 13 $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp(); 14 $("ul.subList").not($(this).next("ul.subList")).slideUp(); 15 16 }); 17 18 $("ul.subMenu h4").click(function() { 19 $(this).next("ul.subList").slideToggle('fast'); 20 $("ul.subList").not($(this).next("ul.subList")).slideUp(); 21 22 }); 23});
試してみたこと
特定のリストを開いた状態にするには、location.hashを使ったらよいと書かれていました。
なので、上記のjavascriptのコメントになっている部分でhashを使ってみました。
ですが、メニューが全く開かない状態になりました。
最後に
流れ的には、下記の順番のような内容が分かりません
- 一度、アコーディオンメニューで開いたリンクをクリックして、開いた場所を記憶する
- リンク先のページ(例：sub_list_1-1-1.html)からアコーディオンメニュー(index.html)に戻る
- 1.で記憶した場所のアコーディオンメニューがリストまで開かれている。
また、PHPのPOSTを用いて、アコーディオンリストの特定の場所を開いた方がいいのかわかりません。
皆様方からご助言を頂ければと存じます。
お手数ですが、宜しくお願い致します。
追記（2021/4/9）
hentaiman様のご教授の元、下記プログラムのようにハッシュタグを入れてみました。
ソース(2021/4/9)
index.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <title>test</title> 10</head> 11 12<body> 13 <ul class="accordionBox"> 14 <li> 15 <h3>main menu 1</h3> 16 <ul class="subMenu"> 17 <li> 18 <h4>sub menu 1-1</h4> 19 <ul class="subList"> 20 <li id="sub_list_1-1-1"><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li> 21 <li id="sub_list_1-1-2"><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li> 22 </ul> 23 </li> 24 <li> 25 <h4>sub menu 1-2</h4> 26 <ul class="subList"> 27 <li id="sub_list_1-2-1"><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li> 28 <li id="sub_list_1-2-2"><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li> 29 </ul> 30 </li> 31 </ul><!-- subMenu --> 32 </li> 33 <li> 34 <h3>main menu 2</h3> 35 <ul class="subMenu right"> 36 <li> 37 <h4>sub menu 2-1</h4> 38 <ul class="subList"> 39 <li id="sub_list_2-1-1"><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a></li> 40 <li id="sub_list_2-1-2"><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li> 41 </ul> 42 </li> 43 <li> 44 <h4>sub menu 2-2</h4> 45 <ul class="subList"> 46 <li id="sub_list_2-2-1"><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li> 47 <li id="sub_list_2-2-2"><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li> 48 </ul> 49 </li> 50 </ul><!-- subMenu --> 51 </li> 52 </ul><!-- accordionBox --> 53</body> 54</html>
sub_list_1-1-1.html ～ sub_list_2-2-2.html
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>sub_list_1-1-1</title> 8</head> 9<body> 10 sub_list_1-1-1<br> 11 <a href="index.html#sub_list_1-1-1">戻る</a> 12</body> 13</html>
javascript
1$(function() { 2 $("ul.subMenu").hide(); 3 $("ul.subList").hide(); 4 5 let hash = location.hash; 6 $(hash).next("ul.accordionBox").addClass('open'); 7 $(hash).next("ul.subMenu").addClass('open'); 8 $(hash).next("ul.subList").addClass('open'); 9 $('ul.subList:not(.open)').hide(); 10 11 console.log("hash_is:" + hash); 12 13 $("ul.accordionBox h3").click(function() { 14 $(this).next("ul.subMenu").slideToggle('fast'); 15 $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp(); 16 $("ul.subList").not($(this).next("ul.subList")).slideUp(); 17 18 }); 19 20 $("ul.subMenu h4").click(function() { 21 $(this).next("ul.subList").slideToggle('fast'); 22 $("ul.subList").not($(this).next("ul.subList")).slideUp(); 23 24 }); 25});
できなかったこと
hashを指定しても、javascriptの下記のソースのところが悪いのか、うまく開けませんでした。
javascript
1 let hash = location.hash; 2 $(hash).next("ul.accordionBox").addClass('open'); 3 $(hash).next("ul.subMenu").addClass('open'); 4 $(hash).next("ul.subList").addClass('open'); 5 $('ul.subList:not(.open)').hide();
ハッシュを入れて、アコーディオンメニューを開いた状態にするために、どうすればよいか、
引き続きご教授いただけたらと存じます。
hentaiman様
コメント頂きありがとうございます。
hentaiman様のコメントを拝見してから、console.logでlocation.hashを見てみると空だったです。
$('#' + hash)のhashの部分が空なので、$('#'+ "")となり、下記のようなエラーが出ていました。
jquery-3.2.1.min.js:2 Uncaught Error: Syntax error, unrecognized expression: #
ハッシュがうまく設定されていないようですが、私自身、ハッシュのつけ方が分からない状態でもあります。
エラーについてはsyntaxerrorなので見直してねって感じですけど、ハッシュはリンク先を指定する時に<a href='index.html#tabname'>link</a>みたいな感じに#の部分を付ける事です
リンク押すたびに毎回全部閉じて該当のハッシュに対応するタブだけ開く処理にしたら良いと思われまする
hentaiman様
お手数かけていただき、誠に感謝いたします。
hentaiman様が仰ったことをさっそく実践してみますね。
hentaiman様
お世話になっております。
index.htmlのliタブの部分にハッシュタグを入れ、sub_list_1-1-1.htmlにハッシュを指定しました。
これで、エラーはなくなりました。ですが、ハッシュタグとulタブ・liタブの相性が悪いのか、
うまくハッシュタグが付いたアコーディオンリストを表示することが出来ませんでした。
どうすれば、うまくハッシュタグがついたアコーディオンリストを、javascriptで表示すればいいか
難しいですね。
そのnextの使い方するなら直後のliを取る目的じゃないとおかしい
一旦コード置いといて文章でロジックを整理してからコード作り直してみたらどうでしょう
hentaiman様
度々コメント頂きありがとうございます。
そうですね。一旦ロジックを整理してからコードを作り直してみます。
色々とご教授いただき、誠にありがとうございます。
回答1件
0
自己解決
謝辞
hentaiman様のご助言により、自己解決できました！
hentaiman様、本当にありがとうございました。
下記に自己解決したソースを添付いたします。
ソース
inde.php
php
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 9 <title>test</title> 10</head> 11 12<body> 13 <input type="text" value="<?php echo $_POST['hash'] ?>"> 14 <ul class="accordionBox"> 15 <li> 16 <h3>main menu 1</h3> 17 <ul class="subMenu" id="form_1"> 18 <li> 19 <h4>sub menu 1-1</h4> 20 <ul class="subList" id="form_1-1"> 21 <li id="sub_list_1-1-1" class="context1"><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li> 22 <li id="sub_list_1-1-2" class="context1"><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li> 23 </ul> 24 </li> 25 <li> 26 <h4>sub menu 1-2</h4> 27 <ul class="subList" id="form_1-2"> 28 <li id="sub_list_1-2-1" class="context2"><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li> 29 <li id="sub_list_1-2-2" class="context2"><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li> 30 </ul> 31 </li> 32 </ul><!-- subMenu --> 33 </li> 34 <li> 35 <h3>main menu 2</h3> 36 <ul class="subMenu" id="form_2"> 37 <li> 38 <h4>sub menu 2-1</h4> 39 <ul class="subList" id="form_2-1"> 40 <li id="sub_list_2-1-1" class="context3"><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a> 41 </li> 42 <li id="sub_list_2-1-2" class="context3"><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li> 43 </ul> 44 </li> 45 <li> 46 <h4>sub menu 2-2</h4> 47 <ul class="subList" id="form_2-2"> 48 <li id="sub_list_2-2-1" class="context4"><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li> 49 <li id="sub_list_2-2-2" class="context4"><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li> 50 </ul> 51 </li> 52 </ul><!-- subMenu --> 53 </li> 54 </ul><!-- accordionBox --> 55</body> 56</html>
sub_list_1-1-1.html ～ sub_list_2-2-2
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>sub_list_1-1-1</title> 8</head> 9<body> 10 sub_list_1-1-1<br> 11 <form action="./index.php" method="POST"> 12 <input type="hidden" name="hash" value="form_1-1-1"> 13 <input type="submit" value="送信"> 14 </form> 15</body> 16</html>
javascript
1$(function() { 2 let hash = "<?php echo $_POST['hash']; ?>"; 3 const main = hash.substr(0, 6); 4 console.log("main is " + main); 5 const sub = hash.substr(0, 8); 6 console.log("sub is " + sub); 7 8 $(".accordionBox").addClass('open'); 9 $(".accordionBox > li > #" + main).addClass('open'); 10 $("#" + main + " > li > #" + sub).addClass('open'); 11 12 $('.subList:not(.open)').hide(); 13 $('.subMenu:not(.open)').hide(); 14 15 console.log("hash_is:" + hash); 16 17 $("ul.accordionBox h3").click(function() { 18 $(this).next("ul.subMenu").slideToggle('fast'); 19 $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp(); 20 $("ul.subList").not($(this).next("ul.subList")).slideUp(); 21 22 }); 23 24 $("ul.subMenu h4").click(function() { 25 $(this).next("ul.subList").slideToggle('fast'); 26 $("ul.subList").not($(this).next("ul.subList")).slideUp(); 27 28 }); 29});
解決策
間違えたタブの取得方法は、同一階層を取得する.next()でした。
hentaiman様のご助言により、ソースを見返すと、同一階層の関係ではなく、下記ソースのように親子関係を指定すると出来ました。
javascript
1 $(".accordionBox > li > #" + main).addClass('open');
プログラミングは奥が深いですね。
投稿2021/04/09 06:52
総合スコア19
あなたの回答
tips
プレビュー
