質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

別ページからの遷移後に指定要素(アコーディオンリンク先)だけ開く

解決済

回答 4

投稿

  • 評価
  • クリップ 0
  • VIEW 2,961

score 10

やりたいこと
1 別ページへ飛んだ指定の要素だけ開く(アコーディオン)
2 別ページからの遷移後に更新ボタンをおしたら表示しているURLからアンカータグ(#)を消す。
(更新ボタンを押したらアコーディオンを閉じる)
3 別ページ遷移後に要素の位置までスクロールする

やりたいことは上の3つです。
1,2は確実にやりたいことです。

jqueryを使って参考サイトを元に作りましたが上手くいきません。
hash.match...の書き方を理解できていません。
また現状の作りですとindex.html#categorys_q1の状態で
最後のliのリストが開いた状態になってしまいます。

よろしくお願いいたします。

参考サイト

https://irohacross.net/2015/02/jquery_tab.html

//■リンク元ページ
<ul class="faq_block">
   <li class="s_txt"><a href="./index.html#categorys_q1"><span>カテゴリ1</span></a></li>
   <li class="s_txt"><a href="./index.html#categorys_q2"><span>カテゴリ2</span></a></li>
   <li class="s_txt"><a href="./index.html#categorys_q3"><span>カテゴリ3</span></a></li>
</ul>
//■別ページ
<ul class="categorys_box">
    <li id="categorys_q1">
        <div class="qabtn"><p><span>カテゴリー1</span></p></div>
        <ul class="list answer_box">
        <li><p class="subcategory"><span>サブタイトルです</span></p>
        <p>アンサー</p></li>
        <li><p class="subcategory"><span>サブタイトルです2</span></p>
        <p>アンサー2</p></li>
        <li><p class="subcategory"><span>サブタイトルです3</span></p>
        <p>アンサー3</p></li>
        </ul>
</li>
    <li id="categorys_q2">
        <div class="qabtn"><p><span>カテゴリー3</span></p></div>
        <ul class="list answer_box">
        <li><p class="subcategory"><span>サブタイトルです</span></p>
        <p>アンサー</p></li>
        <li><p class="subcategory"><span>サブタイトルです2</span></p>
        <p>アンサー2</p></li>
        <li><p class="subcategory"><span>サブタイトルです3</span></p>
        <p>アンサー3</p></li>
        </ul>
    </li>

</ul> 
//■css
.list {
    display: none;
}
//■script
//ダイレクトリンク
$(function() {
  //location.hashで#以下を取得 変数hashに格納
  var hash = location.hash; 
  //hashの中に#tab~が存在するか調べる。
  hash = (hash.match(/^#categorys_q\d+$/) || [])[0];

  //hashに要素が存在する場合、hashで取得した文字列(#tab2,#tab3等)から#より後を取得(tab2,tab3) 
      if($(hash).length){
  var tabname = hash.slice(1) ;
  } else{
      // 要素が存在しなければtabnameにtab1を代入する
      var tabname = "categorys_q1";}
  //コンテンツを一度すべて非表示にし、
  $('.list').css('display','none');

  //一度タブについているクラスselectを消し、
  $('.qabtn').removeClass('select');

  var tabno = $('.qabtn#' + tabname).index();

  //クリックされたタブと同じ順番のコンテンツを表示します。
  $('.list').eq(tabno).fadeIn();

  //クリックされたタブのみにクラスselectをつけます。
  $('.qabtn').eq(tabno).addClass('select')
  return false;
  });
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+1

とりあえず、こんな感じの動きがしたいのかな?と推測してコードを書いてみました。
下記コードをペーストしたhtmlファイルを同一階層に置けば実行できます。
※名前はそれぞれpage1.html page2.htmlにしてます。

1 別ページへ飛んだ指定の要素だけ開く(アコーディオン)

カテゴリ1 を押すと カテゴリー1 のメニューが表示
カテゴリ2 を押すと カテゴリー2 のメニューが表示

2 別ページからの遷移後に更新ボタンをおしたら表示しているURLからアンカータグ(#)を消す。
(更新ボタンを押したらアコーディオンを閉じる)

自分の方法だとそもそもurl変わらないのでリセットボタンを押したら
ページトップに戻り、メニューは閉じるようになってます。

3 別ページ遷移後に要素の位置までスクロールする

アコーディオンの位置まで飛んでます。

page1.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <ul>
        <li><a id="a1" href="page2.html"><span>カテゴリ1</span></a></li>
        <li><a id="a2" href="page2.html"><span>カテゴリ2</span></a></li>
    </ul>
    <script>
        const a = document.getElementsByTagName("a");

        sessionStorage.removeItem("key");

        a[0].addEventListener("click", () => {
            sessionStorage.setItem("key", "zero");
        });

        a[1].addEventListener("click", () => {
            sessionStorage.setItem("key", "first");
        });
    </script>
</body>

</html>


page2.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide {
            display: none;
        }

        .height {
            height: 100vh;
        }
    </style>
</head>

<body>
    <button id="btnJs00" class="height">
        リセットボタン
    </button>
    <ul>
        <li class="height">
            <di>
                <p><span id="btnJs01">カテゴリー1</span></p>
            </di>
            <ul id="ul01" class="hide">
                <li>
                    <p><span>サブタイトルです</span></p>
                    <p>アンサー</p>
                </li>
                <li>
                    <p><span>サブタイトルです2</span></p>
                    <p>アンサー2</p>
                </li>
                <li>
                    <p><span>サブタイトルです3</span></p>
                    <p>アンサー3</p>
                </li>
            </ul>
        </li>
        <li class="height">
            <div>
                <p><span id="btnJs02">カテゴリー2</span></p>
            </div>
            <ul id="ul02" class="hide">
                <li>
                    <p><span>サブタイトルです</span></p>
                    <p>アンサー</p>
                </li>
                <li>
                    <p><span>サブタイトルです2</span></p>
                    <p>アンサー2</p>
                </li>
                <li>
                    <p><span>サブタイトルです3</span></p>
                    <p>アンサー3</p>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        const btn0 = document.getElementById("btnJs00");
        const btn1 = document.getElementById("btnJs01");
        const btn2 = document.getElementById("btnJs02");
        const ul1 = document.getElementById("ul01");
        const ul2 = document.getElementById("ul02");

        window.addEventListener("beforeunload", function (e) {
            scrollTo(0, 0);
        });

        if (sessionStorage.getItem('key') === "zero") {
            setTimeout(() => {
                btn1.scrollIntoView(true);
                btn1.click();
            }, 10);
        }

        if (sessionStorage.getItem('key') === "first") {
            setTimeout(() => {
                btn2.scrollIntoView(true);
                btn2.click();
            }, 10);
        }

        const toggle = (btn, ul) => {
            btn.addEventListener("click", () => {
                ul.classList.toggle("hide");
            });
        }

        toggle(btn1, ul1);
        toggle(btn2, ul2);

        btn0.addEventListener("click", () => {
            location.reload();

        });

        sessionStorage.removeItem("key");
    </script>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/25 19:12

    >Jon_doさん
    回答ありがとうございます。
    認識同じです、大変助かります。

    今回作っているコードはリンク数が多く、
    今後も増えていく可能性がありますので、
    別の書き方でいきたいと思っています。
    今後同じような案件でページ外リンクが少ない場合は使わせていただきたいと思います。

    また新たな課題が出てきました。
    もしお時間あればお知恵を貸してください。
    よろしくお願いします。

    キャンセル

check解決した方法

0

下記で解決しました。
ご意見いただいた皆様ありがとうございました。

// faqアコーディオン
  $(function(){
    $('.qabtn').each(function(){
        $(this).on('click',function(){
            $(this).toggleClass('current');
            // $("+.list",this).slideToggle(800);
            $("+.list",this).slideToggle(500);
            return false;
        });
    });
    // faq詳細ページでselect,classボタンを外す
    $(".qabtn").click(function(){
      if($(this).hasClass("selected")){ // クリックされた要素がclickedクラスだったら
        $(this).removeClass("selected");
        $(this).removeClass("current");
      // }else{
      }
    });
});
//1_faqからfaqviewページまで飛んだ時に別ページへ飛んだ指定の要素だけ開く
//2_別ページからの遷移後に再読み込みしたら表示しているURLからアンカータグ(#)を消す。
//3_別ページ遷移後に要素の位置までスクロールする
$(document).ready(function($){
  //リンク位置まで移動
  $(location.hash).children('.list').fadeToggle(500);
  $(location.hash).find('.qabtn').addClass("selected");
var flg=window.performance.navigation.type;
$(window).on('pageshow', function(e){
  $('.answer_box').filter(function(){
    return $(this).closest(location.hash).length==0;
  }).hide();

  if(flg==1) history.replaceState('','',location.href.replace(/#.+$/,''));
  flg=2;
});
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

とりあえず

$(function(){
  $('.answer_box').filter(function(){
    // ~~return $(this).closest(location.href).length==0;~~
    return $(this).closest(location.hash).length==0;
  }).hide();
});


2番目は「更新ボタン」がなにかわかりません
3番目は意味がよくわかりません

追記(全文)

  • first.html
<ul class="faq_block">
   <li class="s_txt"><a href="second.html#categorys_q1"><span>カテゴリ1</span></a></li>
   <li class="s_txt"><a href="second.html#categorys_q2"><span>カテゴリ2</span></a></li>
   <li class="s_txt"><a href="second.html#categorys_q3"><span>カテゴリ3</span></a></li>
</ul>
  • second.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var flg=window.performance.navigation.type;
$(window).on('pageshow', function(e){
  $('.answer_box').filter(function(){
    return $(this).closest(location.hash).length==0;
  }).hide();
  if(flg==1) history.replaceState('','',location.href.replace(/#.+$/,''));
  flg=2;
});
</script>
<ul class="categorys_box">
  <li id="categorys_q1">
    <div class="qabtn"><p><span>カテゴリー1</span></p></div>
    <ul class="list answer_box">
      <li><p class="subcategory"><span>サブタイトルです</span></p>
      <p>アンサー</p></li>
      <li><p class="subcategory"><span>サブタイトルです2</span></p>
      <p>アンサー2</p></li>
      <li><p class="subcategory"><span>サブタイトルです3</span></p>
      <p>アンサー3</p></li>
    </ul>
  </li>
  <li id="categorys_q2">
    <div class="qabtn"><p><span>カテゴリー2</span></p></div>
    <ul class="list answer_box">
      <li><p class="subcategory"><span>サブタイトルです</span></p>
      <p>アンサー</p></li>
      <li><p class="subcategory"><span>サブタイトルです2</span></p>
      <p>アンサー2</p></li>
      <li><p class="subcategory"><span>サブタイトルです3</span></p>
      <p>アンサー3</p></li>
    </ul>
  </li>
  <li id="categorys_q3">
    <div class="qabtn"><p><span>カテゴリー3</span></p></div>
    <ul class="list answer_box">
      <li><p class="subcategory"><span>サブタイトルです</span></p>
      <p>アンサー</p></li>
      <li><p class="subcategory"><span>サブタイトルです2</span></p>
      <p>アンサー2</p></li>
      <li><p class="subcategory"><span>サブタイトルです3</span></p>
      <p>アンサー3</p></li>
    </ul>
  </li>
</ul>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/24 19:48 編集

    > yambejpさん
    回答ありがとうございます。
    やってみます。

    2 別ページからの遷移後に更新ボタンをおしたら表示しているURLからアンカータグ(#)を消す。
    (更新ボタンを押したらアコーディオンを閉じる)

    f5ボタンで再読み込みした時にアコーディオンを閉じた状態にする

    3 別ページ遷移後に要素の位置までスクロールする

    別ページから飛んできたときアコーディオンの指定要素の位置に移動する

    わかりづらくてすみません。
    よろしくお願いします。

    キャンセル

  • 2020/07/24 22:18

    追記しました
    リロードのチェックはしてあります。
    3番目はリンクに飛びますよね?

    キャンセル

  • 2020/07/25 19:03

    > yambejpさん
    追記ありがとうございます!
    希望の状態に近くなりました。
    2点ほど追加で実現したいことがあります。
    お知恵をいただければ幸いです。
    よろしくお願いします。

    キャンセル

0

ご回答いただいたコードを参考に試し、下記コードが希望の状態に近くなりました。
また、前回アコーディオンのscriptを書いていなかったので、
追記します。
htmlの変更はございません。

  $(function(){
    $('.qabtn').each(function(){
        $(this).on('click',function(){
            $(this).toggleClass('current');
            $("+.list",this).slideToggle()
            return false;
        });
    });
});
$(document).ready(function($){
  //リンク位置まで移動
  $(location.hash).children('.list').fadeToggle();
var flg=window.performance.navigation.type;
$(window).on('pageshow', function(e){
  $('.answer_box').filter(function(){
    return $(this).closest(location.hash).length==0;
  }).hide();
  if(flg==1) history.replaceState('','',location.href.replace(/#.+$/,''));
  flg=2;
});
});

新たな課題が見つかりました。。
1.f5ボタンで再読み込みした時にアコーディオンを閉じた状態にする
URLからアンカータグ(#)は消えるが、.answer_boxのdisplay:blck styleが消えない。
再読み込み1回目 .answer_box display:blckが消えない
再読み込み2回目  .answer_box display:blckが消える


1度目の再読み込みでアコーディオンが開いた状態からアコーディオンを閉じた状態にしたい。

2.選択している要素にだけ.qabtnに.currentをつけたい

よろしくお願いします。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/26 00:02

    なんかうまく伝わってなさそうなので、私の回答の追記部分を
    全文のせておきました
    このままコピペしてもらうと命題の3要件をおさえられると思います

    キャンセル

  • 2020/07/26 13:29

    >yambejpさん
    ありがとうございます。

    確認いたしました。
    3番が再現できなかったので、
    私の方で少し変更し、やりたいことがほぼできました。
    いじっているソースは他にもJavascriptを書き込んでいるので、その影響かもしれません、、
    回答ありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る