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

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

ただいまの
回答率

88.13%

アコーディオンメニューから遷移したリンクでページに遷移した後、ページからメニューに戻るときに、遷移したアコーディオンメニューの所が開いている状態にしたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 88

score 11

前提条件・したいこと

  1. index.htmlからアコーディオンメニューを【メイン・サブ・リスト】の順で開きます。
  2. リストのリンクをクリックして、画面に遷移します。
  3. 遷移したリストから、アコーディオンメニューのindex.htmlに戻ります。
  4. 1. で開いた特定のアコーディオンメニューがリストまで開かれています。


・初期状態
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

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>test</title>
</head>

<body>
    <ul class="accordionBox">
        <li>
            <h3>main menu 1</h3>
            <ul class="subMenu">
                <li>
                    <h4>sub menu 1-1</h4>
                    <ul class="subList">
                        <li><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li>
                        <li><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li>
                    </ul>
                </li>
                <li>
                    <h4>sub menu 1-2</h4>
                    <ul class="subList">
                        <li><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li>
                        <li><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li>
                    </ul>
                </li>
            </ul><!-- subMenu -->
        </li>
        <li>
            <h3>main menu 2</h3>
            <ul class="subMenu right">
                <li>
                    <h4>sub menu 2-1</h4>
                    <ul class="subList">
                        <li><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a></li>
                        <li><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li>
                    </ul>
                </li>
                <li>
                    <h4>sub menu 2-2</h4>
                    <ul class="subList">
                        <li><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li>
                        <li><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li>
                    </ul>
                </li>
            </ul><!-- subMenu -->
        </li>
    </ul><!-- accordionBox -->
</body>
</html>

sub_list_1-1-1.html ~ sub_list_2_2_2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sub_list_1-1-1</title>
</head>
<body>
  sub_list_1-1-1<br>
  <a href="index.html">戻る</a>
</body>
</html>
$(function() {
    $("ul.subMenu").hide();
    $("ul.subList").hide();

    // let hash = location.hash;
    // $('#' + hash).next("ul.accordionBox").addClass('open');
    // $('#' + hash).next("ul.subMenu").addClass('open');
    // $('#' + hash).next("ul.subList").addClass('open');
    // $('ul.subList:not(.open)').hide();

    $("ul.accordionBox h3").click(function() {
        $(this).next("ul.subMenu").slideToggle('fast');
        $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp();
        $("ul.subList").not($(this).next("ul.subList")).slideUp();

    });

    $("ul.subMenu h4").click(function() {
        $(this).next("ul.subList").slideToggle('fast');
        $("ul.subList").not($(this).next("ul.subList")).slideUp();

    });
});

試してみたこと

特定のリストを開いた状態にするには、location.hashを使ったらよいと書かれていました。
なので、上記のjavascriptのコメントになっている部分でhashを使ってみました。
ですが、メニューが全く開かない状態になりました。

最後に

流れ的には、下記の順番のような内容が分かりません

  1. 一度、アコーディオンメニューで開いたリンクをクリックして、開いた場所を記憶する
  2. リンク先のページ(例:sub_list_1-1-1.html)からアコーディオンメニュー(index.html)に戻る
  3. 1.で記憶した場所のアコーディオンメニューがリストまで開かれている。

また、PHPのPOSTを用いて、アコーディオンリストの特定の場所を開いた方がいいのかわかりません。

皆様方からご助言を頂ければと存じます。
お手数ですが、宜しくお願い致します。

追記(2021/4/9)

hentaiman様のご教授の元、下記プログラムのようにハッシュタグを入れてみました。

ソース(2021/4/9)

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>test</title>
</head>

<body>
    <ul class="accordionBox">
        <li>
            <h3>main menu 1</h3>
            <ul class="subMenu">
                <li>
                    <h4>sub menu 1-1</h4>
                    <ul class="subList">
                        <li id="sub_list_1-1-1"><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li>
                        <li id="sub_list_1-1-2"><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li>
                    </ul>
                </li>
                <li>
                    <h4>sub menu 1-2</h4>
                    <ul class="subList">
                        <li id="sub_list_1-2-1"><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li>
                        <li id="sub_list_1-2-2"><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li>
                    </ul>
                </li>
            </ul><!-- subMenu -->
        </li>
        <li>
            <h3>main menu 2</h3>
            <ul class="subMenu right">
                <li>
                    <h4>sub menu 2-1</h4>
                    <ul class="subList">
                        <li id="sub_list_2-1-1"><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a></li>
                        <li id="sub_list_2-1-2"><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li>
                    </ul>
                </li>
                <li>
                    <h4>sub menu 2-2</h4>
                    <ul class="subList">
                        <li id="sub_list_2-2-1"><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li>
                        <li id="sub_list_2-2-2"><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li>
                    </ul>
                </li>
            </ul><!-- subMenu -->
        </li>
    </ul><!-- accordionBox -->
</body>
</html>

sub_list_1-1-1.html ~ sub_list_2-2-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sub_list_1-1-1</title>
</head>
<body>
  sub_list_1-1-1<br>
  <a href="index.html#sub_list_1-1-1">戻る</a>
</body>
</html>
$(function() {
    $("ul.subMenu").hide();
    $("ul.subList").hide();

    let hash = location.hash;
    $(hash).next("ul.accordionBox").addClass('open');
    $(hash).next("ul.subMenu").addClass('open');
    $(hash).next("ul.subList").addClass('open');
    $('ul.subList:not(.open)').hide();

    console.log("hash_is:" + hash);

    $("ul.accordionBox h3").click(function() {
        $(this).next("ul.subMenu").slideToggle('fast');
        $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp();
        $("ul.subList").not($(this).next("ul.subList")).slideUp();

    });

    $("ul.subMenu h4").click(function() {
        $(this).next("ul.subList").slideToggle('fast');
        $("ul.subList").not($(this).next("ul.subList")).slideUp();

    });
});

できなかったこと

hashを指定しても、javascriptの下記のソースのところが悪いのか、うまく開けませんでした。

    let hash = location.hash;
    $(hash).next("ul.accordionBox").addClass('open');
    $(hash).next("ul.subMenu").addClass('open');
    $(hash).next("ul.subList").addClass('open');
    $('ul.subList:not(.open)').hide();

ハッシュを入れて、アコーディオンメニューを開いた状態にするために、どうすればよいか、
引き続きご教授いただけたらと存じます。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • unwind

    2021/04/09 13:18

    hentaiman様
    お世話になっております。

    index.htmlのliタブの部分にハッシュタグを入れ、sub_list_1-1-1.htmlにハッシュを指定しました。

    これで、エラーはなくなりました。ですが、ハッシュタグとulタブ・liタブの相性が悪いのか、
    うまくハッシュタグが付いたアコーディオンリストを表示することが出来ませんでした。

    どうすれば、うまくハッシュタグがついたアコーディオンリストを、javascriptで表示すればいいか
    難しいですね。

    キャンセル

  • hentaiman

    2021/04/09 13:44

    そのnextの使い方するなら直後のliを取る目的じゃないとおかしい
    一旦コード置いといて文章でロジックを整理してからコード作り直してみたらどうでしょう

    キャンセル

  • unwind

    2021/04/09 14:00

    hentaiman様
    度々コメント頂きありがとうございます。

    そうですね。一旦ロジックを整理してからコードを作り直してみます。
    色々とご教授いただき、誠にありがとうございます。

    キャンセル

回答 1

check解決した方法

0

謝辞

hentaiman様のご助言により、自己解決できました!
hentaiman様、本当にありがとうございました。

下記に自己解決したソースを添付いたします。

ソース

inde.php

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <title>test</title>
</head>

<body>
    <input type="text" value="<?php echo $_POST['hash'] ?>">
    <ul class="accordionBox">
        <li>
            <h3>main menu 1</h3>
            <ul class="subMenu" id="form_1">
                <li>
                    <h4>sub menu 1-1</h4>
                    <ul class="subList" id="form_1-1">
                        <li id="sub_list_1-1-1" class="context1"><a href="./sub_list_1-1-1.html">sub list 1-1-1</a></li>
                        <li id="sub_list_1-1-2" class="context1"><a href="./sub_list_1-1-2.html">sub list 1-1-2</a></li>
                    </ul>
                </li>
                <li>
                    <h4>sub menu 1-2</h4>
                    <ul class="subList" id="form_1-2">
                        <li id="sub_list_1-2-1" class="context2"><a href="./sub_list_1-2-1.html">sub list 1-2-1</a></li>
                        <li id="sub_list_1-2-2" class="context2"><a href="./sub_list_1-2-2.html">sub list 1-2-2</a></li>
                    </ul>
                </li>
            </ul><!-- subMenu -->
        </li>
        <li>
            <h3>main menu 2</h3>
            <ul class="subMenu" id="form_2">
                <li>
                    <h4>sub menu 2-1</h4>
                    <ul class="subList" id="form_2-1">
                        <li id="sub_list_2-1-1" class="context3"><a href="./sub_list_2-1-1.html">sub list 2-1-1 </a>
                        </li>
                        <li id="sub_list_2-1-2" class="context3"><a href="./sub_list_2-2-1.html">sub list 2-1-2</a></li>
                    </ul>
                </li>
                <li>
                    <h4>sub menu 2-2</h4>
                    <ul class="subList" id="form_2-2">
                        <li id="sub_list_2-2-1" class="context4"><a href="./sub_list_2-2-1.html">sub menu 2-2-1</a></li>
                        <li id="sub_list_2-2-2" class="context4"><a href="./sub_list_2-2-2.html">sub menu 2-2-2</a></li>
                    </ul>
                </li>
            </ul><!-- subMenu -->
        </li>
    </ul><!-- accordionBox -->
</body>
</html>

sub_list_1-1-1.html ~ sub_list_2-2-2

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>sub_list_1-1-1</title>
</head>
<body>
  sub_list_1-1-1<br>
  <form action="./index.php" method="POST">
    <input type="hidden" name="hash" value="form_1-1-1">
    <input type="submit" value="送信">
  </form>
</body>
</html>
$(function() {
    let hash = "<?php echo $_POST['hash']; ?>";
    const main = hash.substr(0, 6);
    console.log("main is " + main);
    const sub = hash.substr(0, 8);
    console.log("sub is " + sub);

    $(".accordionBox").addClass('open');
    $(".accordionBox > li > #" + main).addClass('open');
    $("#" + main + " > li > #" + sub).addClass('open');

    $('.subList:not(.open)').hide();
    $('.subMenu:not(.open)').hide();

    console.log("hash_is:" + hash);

    $("ul.accordionBox h3").click(function() {
        $(this).next("ul.subMenu").slideToggle('fast');
        $("ul.subMenu").not($(this).next("ul.subMenu")).slideUp();
        $("ul.subList").not($(this).next("ul.subList")).slideUp();

    });

    $("ul.subMenu h4").click(function() {
        $(this).next("ul.subList").slideToggle('fast');
        $("ul.subList").not($(this).next("ul.subList")).slideUp();

    });
});

解決策

間違えたタブの取得方法は、同一階層を取得する.next()でした。
hentaiman様のご助言により、ソースを見返すと、同一階層の関係ではなく、下記ソースのように親子関係を指定すると出来ました。

    $(".accordionBox > li > #" + main).addClass('open');

プログラミングは奥が深いですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • トップ
  • PHPに関する質問
  • アコーディオンメニューから遷移したリンクでページに遷移した後、ページからメニューに戻るときに、遷移したアコーディオンメニューの所が開いている状態にしたい