Q&A
なんかうまく伝わってなさそうなので、私の回答の追記部分を
全文のせておきました
このままコピペしてもらうと命題の３要件をおさえられると思います
やりたいこと
1 別ページへ飛んだ指定の要素だけ開く（アコーディオン）
2 別ページからの遷移後に更新ボタンをおしたら表示しているURLからアンカータグ（＃）を消す。
（更新ボタンを押したらアコーディオンを閉じる）
3 別ページ遷移後に要素の位置までスクロールする
やりたいことは上の3つです。
1,2は確実にやりたいことです。
jqueryを使って参考サイトを元に作りましたが上手くいきません。
hash.match...の書き方を理解できていません。
また現状の作りですとindex.html#categorys_q1の状態で
最後のliのリストが開いた状態になってしまいます。
よろしくお願いいたします。
参考サイト
html
1//■リンク元ページ 2<ul class="faq_block"> 3 <li class="s_txt"><a href="./index.html#categorys_q1"><span>カテゴリ1</span></a></li> 4 <li class="s_txt"><a href="./index.html#categorys_q2"><span>カテゴリ2</span></a></li> 5 <li class="s_txt"><a href="./index.html#categorys_q3"><span>カテゴリ3</span></a></li> 6</ul>
html
1//■別ページ 2<ul class="categorys_box"> 3 <li id="categorys_q1"> 4 <div class="qabtn"><p><span>カテゴリー１</span></p></div> 5 <ul class="list answer_box"> 6 <li><p class="subcategory"><span>サブタイトルです</span></p> 7 <p>アンサー</p></li> 8 <li><p class="subcategory"><span>サブタイトルです2</span></p> 9 <p>アンサー2</p></li> 10 <li><p class="subcategory"><span>サブタイトルです3</span></p> 11 <p>アンサー3</p></li> 12 </ul> 13</li> 14 <li id="categorys_q2"> 15 <div class="qabtn"><p><span>カテゴリー3</span></p></div> 16 <ul class="list answer_box"> 17 <li><p class="subcategory"><span>サブタイトルです</span></p> 18 <p>アンサー</p></li> 19 <li><p class="subcategory"><span>サブタイトルです2</span></p> 20 <p>アンサー2</p></li> 21 <li><p class="subcategory"><span>サブタイトルです3</span></p> 22 <p>アンサー3</p></li> 23 </ul> 24 </li> 25 26</ul> 27
css
1//■css 2.list { 3 display: none; 4}
javascript
1//■script 2//ダイレクトリンク 3$(function() { 4 //location.hashで#以下を取得 変数hashに格納 5 var hash = location.hash; 6 //hashの中に#tab～が存在するか調べる。 7 hash = (hash.match(/^#categorys_q\d+$/) || [])[0]; 8 9 //hashに要素が存在する場合、hashで取得した文字列（#tab2,#tab3等）から#より後を取得(tab2,tab3) 10 if($(hash).length){ 11 var tabname = hash.slice(1) ; 12 } else{ 13 // 要素が存在しなければtabnameにtab1を代入する 14 var tabname = "categorys_q1";} 15 //コンテンツを一度すべて非表示にし、 16 $('.list').css('display','none'); 17 18 //一度タブについているクラスselectを消し、 19 $('.qabtn').removeClass('select'); 20 21 var tabno = $('.qabtn#' + tabname).index(); 22 23 //クリックされたタブと同じ順番のコンテンツを表示します。 24 $('.list').eq(tabno).fadeIn(); 25 26 //クリックされたタブのみにクラスselectをつけます。 27 $('.qabtn').eq(tabno).addClass('select') 28 return false; 29 });
回答4件
0
とりあえず、こんな感じの動きがしたいのかな？と推測してコードを書いてみました。
下記コードをペーストしたhtmlファイルを同一階層に置けば実行できます。
※名前はそれぞれpage1.html page2.htmlにしてます。
1 別ページへ飛んだ指定の要素だけ開く（アコーディオン）
カテゴリ1 を押すと カテゴリー1 のメニューが表示
カテゴリ2 を押すと カテゴリー2 のメニューが表示
2 別ページからの遷移後に更新ボタンをおしたら表示しているURLからアンカータグ（＃）を消す。
（更新ボタンを押したらアコーディオンを閉じる）
自分の方法だとそもそもurl変わらないのでリセットボタンを押したら
ページトップに戻り、メニューは閉じるようになってます。
3 別ページ遷移後に要素の位置までスクロールする
アコーディオンの位置まで飛んでます。
page1.html
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7</head> 8 9<body> 10 <ul> 11 <li><a id="a1" href="page2.html"><span>カテゴリ1</span></a></li> 12 <li><a id="a2" href="page2.html"><span>カテゴリ2</span></a></li> 13 </ul> 14 <script> 15 const a = document.getElementsByTagName("a"); 16 17 sessionStorage.removeItem("key"); 18 19 a[0].addEventListener("click", () => { 20 sessionStorage.setItem("key", "zero"); 21 }); 22 23 a[1].addEventListener("click", () => { 24 sessionStorage.setItem("key", "first"); 25 }); 26 </script> 27</body> 28 29</html>
page2.html
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 <style> 8 .hide { 9 display: none; 10 } 11 12 .height { 13 height: 100vh; 14 } 15 </style> 16</head> 17 18<body> 19 <button id="btnJs00" class="height"> 20 リセットボタン 21 </button> 22 <ul> 23 <li class="height"> 24 <di> 25 <p><span id="btnJs01">カテゴリー１</span></p> 26 </di> 27 <ul id="ul01" class="hide"> 28 <li> 29 <p><span>サブタイトルです</span></p> 30 <p>アンサー</p> 31 </li> 32 <li> 33 <p><span>サブタイトルです2</span></p> 34 <p>アンサー2</p> 35 </li> 36 <li> 37 <p><span>サブタイトルです3</span></p> 38 <p>アンサー3</p> 39 </li> 40 </ul> 41 </li> 42 <li class="height"> 43 <div> 44 <p><span id="btnJs02">カテゴリー2</span></p> 45 </div> 46 <ul id="ul02" class="hide"> 47 <li> 48 <p><span>サブタイトルです</span></p> 49 <p>アンサー</p> 50 </li> 51 <li> 52 <p><span>サブタイトルです2</span></p> 53 <p>アンサー2</p> 54 </li> 55 <li> 56 <p><span>サブタイトルです3</span></p> 57 <p>アンサー3</p> 58 </li> 59 </ul> 60 </li> 61 </ul> 62 <script> 63 const btn0 = document.getElementById("btnJs00"); 64 const btn1 = document.getElementById("btnJs01"); 65 const btn2 = document.getElementById("btnJs02"); 66 const ul1 = document.getElementById("ul01"); 67 const ul2 = document.getElementById("ul02"); 68 69 window.addEventListener("beforeunload", function (e) { 70 scrollTo(0, 0); 71 }); 72 73 if (sessionStorage.getItem('key') === "zero") { 74 setTimeout(() => { 75 btn1.scrollIntoView(true); 76 btn1.click(); 77 }, 10); 78 } 79 80 if (sessionStorage.getItem('key') === "first") { 81 setTimeout(() => { 82 btn2.scrollIntoView(true); 83 btn2.click(); 84 }, 10); 85 } 86 87 const toggle = (btn, ul) => { 88 btn.addEventListener("click", () => { 89 ul.classList.toggle("hide"); 90 }); 91 } 92 93 toggle(btn1, ul1); 94 toggle(btn2, ul2); 95 96 btn0.addEventListener("click", () => { 97 location.reload(); 98 99 }); 100 101 sessionStorage.removeItem("key"); 102 </script> 103</body> 104 105</html>
投稿2020/07/25 08:22
総合スコア1373
0
自己解決
下記で解決しました。
ご意見いただいた皆様ありがとうございました。
javascript
1// faqアコーディオン 2 $(function(){ 3 $('.qabtn').each(function(){ 4 $(this).on('click',function(){ 5 $(this).toggleClass('current'); 6 // $("+.list",this).slideToggle(800); 7 $("+.list",this).slideToggle(500); 8 return false; 9 }); 10 }); 11 // faq詳細ページでselect,classボタンを外す 12 $(".qabtn").click(function(){ 13 if($(this).hasClass("selected")){ // クリックされた要素がclickedクラスだったら 14 $(this).removeClass("selected"); 15 $(this).removeClass("current"); 16 // }else{ 17 } 18 }); 19});
javascript
1//1_faqからfaqviewページまで飛んだ時に別ページへ飛んだ指定の要素だけ開く 2//2_別ページからの遷移後に再読み込みしたら表示しているURLからアンカータグ（＃）を消す。 3//3_別ページ遷移後に要素の位置までスクロールする 4$(document).ready(function($){ 5 //リンク位置まで移動 6 $(location.hash).children('.list').fadeToggle(500); 7 $(location.hash).find('.qabtn').addClass("selected"); 8var flg=window.performance.navigation.type; 9$(window).on('pageshow', function(e){ 10 $('.answer_box').filter(function(){ 11 return $(this).closest(location.hash).length==0; 12 }).hide(); 13 14 if(flg==1) history.replaceState('','',location.href.replace(/#.+$/,'')); 15 flg=2; 16}); 17}); 18
投稿2020/07/26 04:33
総合スコア10
0
ご回答いただいたコードを参考に試し、下記コードが希望の状態に近くなりました。
また、前回アコーディオンのscriptを書いていなかったので、
追記します。
htmlの変更はございません。
javascript
1 $(function(){ 2 $('.qabtn').each(function(){ 3 $(this).on('click',function(){ 4 $(this).toggleClass('current'); 5 $("+.list",this).slideToggle() 6 return false; 7 }); 8 }); 9}); 10
javascript
1$(document).ready(function($){ 2 //リンク位置まで移動 3 $(location.hash).children('.list').fadeToggle(); 4var flg=window.performance.navigation.type; 5$(window).on('pageshow', function(e){ 6 $('.answer_box').filter(function(){ 7 return $(this).closest(location.hash).length==0; 8 }).hide(); 9 if(flg==1) history.replaceState('','',location.href.replace(/#.+$/,'')); 10 flg=2; 11}); 12});
新たな課題が見つかりました。。
1.f5ボタンで再読み込みした時にアコーディオンを閉じた状態にする
URLからアンカータグ（＃）は消えるが、.answer_boxのdisplay:blck styleが消えない。
再読み込み1回目 .answer_box display:blckが消えない
再読み込み2回目 .answer_box display:blckが消える
↓
１度目の再読み込みでアコーディオンが開いた状態からアコーディオンを閉じた状態にしたい。
2.選択している要素にだけ.qabtnに.currentをつけたい
よろしくお願いします。
投稿2020/07/25 09:59
編集2020/07/25 10:06総合スコア10
>yambejpさん
ありがとうございます。
確認いたしました。
３番が再現できなかったので、
私の方で少し変更し、やりたいことがほぼできました。
いじっているソースは他にもJavascriptを書き込んでいるので、その影響かもしれません、、
回答ありがとうございました。
0
とりあえず
javascript
1$(function(){ 2 $('.answer_box').filter(function(){ 3 // ~~return $(this).closest(location.href).length==0;~~ 4 return $(this).closest(location.hash).length==0; 5 }).hide(); 6});
２番目は「更新ボタン」がなにかわかりません
３番目は意味がよくわかりません
追記(全文)
- first.html
javascript
1<ul class="faq_block"> 2 <li class="s_txt"><a href="second.html#categorys_q1"><span>カテゴリ1</span></a></li> 3 <li class="s_txt"><a href="second.html#categorys_q2"><span>カテゴリ2</span></a></li> 4 <li class="s_txt"><a href="second.html#categorys_q3"><span>カテゴリ3</span></a></li> 5</ul>
- second.html
HTML
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 2<script> 3var flg=window.performance.navigation.type; 4$(window).on('pageshow', function(e){ 5 $('.answer_box').filter(function(){ 6 return $(this).closest(location.hash).length==0; 7 }).hide(); 8 if(flg==1) history.replaceState('','',location.href.replace(/#.+$/,'')); 9 flg=2; 10}); 11</script> 12<ul class="categorys_box"> 13 <li id="categorys_q1"> 14 <div class="qabtn"><p><span>カテゴリー１</span></p></div> 15 <ul class="list answer_box"> 16 <li><p class="subcategory"><span>サブタイトルです</span></p> 17 <p>アンサー</p></li> 18 <li><p class="subcategory"><span>サブタイトルです2</span></p> 19 <p>アンサー2</p></li> 20 <li><p class="subcategory"><span>サブタイトルです3</span></p> 21 <p>アンサー3</p></li> 22 </ul> 23 </li> 24 <li id="categorys_q2"> 25 <div class="qabtn"><p><span>カテゴリー2</span></p></div> 26 <ul class="list answer_box"> 27 <li><p class="subcategory"><span>サブタイトルです</span></p> 28 <p>アンサー</p></li> 29 <li><p class="subcategory"><span>サブタイトルです2</span></p> 30 <p>アンサー2</p></li> 31 <li><p class="subcategory"><span>サブタイトルです3</span></p> 32 <p>アンサー3</p></li> 33 </ul> 34 </li> 35 <li id="categorys_q3"> 36 <div class="qabtn"><p><span>カテゴリー3</span></p></div> 37 <ul class="list answer_box"> 38 <li><p class="subcategory"><span>サブタイトルです</span></p> 39 <p>アンサー</p></li> 40 <li><p class="subcategory"><span>サブタイトルです2</span></p> 41 <p>アンサー2</p></li> 42 <li><p class="subcategory"><span>サブタイトルです3</span></p> 43 <p>アンサー3</p></li> 44 </ul> 45 </li> 46</ul>
投稿2020/07/24 10:05
編集2020/07/25 15:01総合スコア114769
みなければいけないのは location.hash では？
asahina1979さん、ありがとうございます
転記ミスしてました。なおしました
> yambejpさん
回答ありがとうございます。
やってみます。
2 別ページからの遷移後に更新ボタンをおしたら表示しているURLからアンカータグ（＃）を消す。
（更新ボタンを押したらアコーディオンを閉じる）
↓
f5ボタンで再読み込みした時にアコーディオンを閉じた状態にする
3 別ページ遷移後に要素の位置までスクロールする
↓
別ページから飛んできたときアコーディオンの指定要素の位置に移動する
わかりづらくてすみません。
よろしくお願いします。
追記しました
リロードのチェックはしてあります。
３番目はリンクに飛びますよね？
> yambejpさん
追記ありがとうございます！
希望の状態に近くなりました。
２点ほど追加で実現したいことがあります。
お知恵をいただければ幸いです。
よろしくお願いします。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/07/25 10:12