多階層のアコーディオンメニューにページ内リンク（アンカーリンク）を飛ばしたい。

前提・実現したいこと

クリッカブルマップを利用して、
指定エリアをクリックしたら、2重のアコーディオンを開いた状態でその箇所へ移動したいです。（同一ページ内）

例えば、画像上にクリッカブルマップで「東京」を作成しクリックした場合に、
アコーディオンの「エリア1」の中の「東京」の位置へアコーディオンが開かれた状態でページ内移動したいです。

クリッカブルマップは画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方こちらを参考に作成しました。

アコーディオンは多階層のメニューこちらを参考に作成しました。

クリッカブルマップで作成した該当のareaを1度クリックするとURLにハッシュがつくのみで何も反応がなく、
2度目をクリックするとアコーディオンが開きます。

これを1度目のクリックでアコーディオンが開くようにしたいです。

また、該当のareaをクリックしても、指定の場所に移動しないので正しく移動するようにしたいです。

有識者の方いらっしゃいましたら、お力添えをいただけると助かります。
どうぞ宜しくお願い致します。

該当のソースコード

html
1<div class="section01">
2    <div class="inner">
3        <figure>
4            <!-- Image Map Generated by http://www.image-map.net/ -->
5            <img src="/assets/img/shop/map_img01.png" alt="" usemap="#image-map">
6
7            <map name="image-map">
8                <area alt="1" title="1" href="#osaka" coords="357,782,484,828" shape="rect">
9                <area alt="2" title="2" href="#tokyo" coords="506,782,1254,1157" shape="rect">
10                <area alt="3" title="3" href="#fukuoka" coords="546,382,34254,1434" shape="rect">
11                <area alt="4" title="4" href="#hokkaido" coords="206,334,3454,1556" shape="rect">
12            </map>
13        </figure>
14    </div>
15</div>
16<div class="section02">
17    <div class="inner">
18        <ul class="accordion">
19            <li class="ac_sub-content">
20                <p class="ac_title ac1">エリア1</p>
21                <ul class="accordion_inner">
22                    <li class="ac_sub ac1-1">
23                        <p class="ac_sub-title" id="osaka">大阪</p>
24                        <ul>
25                            <li class="ac_sub-content">
26                                <p>ホゲホゲ</p>
27                            </li>
28                        </ul>
29                    </li>
30                    <li class="ac_sub ac1-2">
31                        <p class="ac_sub-title" id="tokyo">東京</p>
32                        <ul>
33                            <li class="ac_sub-content">
34                                <p>ホゲホゲ</p>
35                            </li>
36                        </ul>
37                    </li>
38                </ul>
39            </li>
40            <li class="ac_sub-content">
41                <p class="ac_title ac2">エリア2</p>
42                <ul class="accordion_inner">
43                    <li class="ac_sub ac2-1">
44                        <p class="ac_sub-title" id="fukuoka">福岡</p>
45                        <ul>
46                            <li class="ac_sub-content">
47                                <p>ホゲホゲ</p>
48                            </li>
49                        </ul>
50                    </li>
51                    <li class="ac_sub ac2-2">
52                        <p class="ac_sub-title" id="hokkaido">北海道</p>
53                        <ul>
54                            <li class="ac_sub-content">
55                                <p>ホゲホゲ</p>
56                            </li>
57                        </ul>
58                    </li>
59                </ul>
60            </li>
61        </ul>
62    </div>
63</div>

js
1$(function () {
2
3    //.accordionの中の.ac_titleがクリックされたら
4    $('.accordion .ac_title').click(function () {
5
6        //クリックされた.accordionの中の.ac_titleに隣接するul要素が開いたり閉じたりする。
7        $(this).next('ul').slideToggle();
8　　　　　//クリック場所のアイコン（+.-）の切り替え
9        $(this).toggleClass("active");
10
11    });
12
13    //.accordionの中の.accordion_innerの中のli要素の中の.ac_sub-titleがクリックされたら
14    $('.accordion .accordion_inner li .ac_sub-title').click(function () {
15
16        //クリックされた.accordionの中の.innerの中のli要素の中の.ac_sub-titleに隣接するul要素が開いたり閉じたりする。
17        $(this).next('ul').slideToggle();
18　　　　//クリック場所のアイコン（+.-）の切り替え
19        $(this).toggleClass("active");
20    });
21
22
23
24    // areaを押すと、
25    // アンカーリンクしてアコーディオン開閉
26    $(".section01 area").click(function () {
27        //一旦全てのアコーディオン閉じる
28        $(".accordion ul").hide();
29        $(".ac_title").removeClass("active");
30        $(".ac_sub-title").removeClass("active");
31
32        //ハッシュ取得
33        var hash = $(location).attr("hash");
34        console.log(hash);
35        //アンカーリンクのズレを補正
36        var headerHeight = 200;
37        var position = $(hash).offset().top - headerHeight;
38        console.log(position);
39        $("html, body").animate({ scrollTop: position }, 550, "swing");
40        //アコーディオン処理
41        $(hash).closest("ul").slideToggle();
42        $(hash).next("ul").slideToggle();
43    });
44});
45

Lhankor_Mhy

2020/01/06 02:35

console.log(hash); の結果はどうなっていますか？

kii.32

2020/01/06 03:37

コメントありがとうございます。 console.log(hash);で確認をしてみました何もクリックしない場合 →Uncaught ReferenceError: hash is not defined 1度目のクリック（#aaa） →Uncaught TypeError: Cannot read property 'top' of undefined 2度目のクリック（#aaa） →#aaa 　-200 1度目のクリックのエラーはアコーディオンがdisplay:noneで隠れているため、 .offset().topを利用した距離が測れないためのエラーのようでした。そもそもの、アコーディオンの記述方法が適していないのでしょうか。。。参考 https://twotone.me/web/1767/

Lhankor_Mhy

2020/01/06 03:49

同じ場所で console.log(location); とすると、どのような値が取れますか？

kii.32

2020/01/06 03:58

console.log(location);も確認しました！何もクリックしない場合 → Location {href: "http://localhost:3000/shop/", ancestorOrigins: DOMStringList, origin: "http://localhost:3000", protocol: "http:", host: "localhost:3000", …} ancestorOrigins: DOMStringList {length: 0} origin: "http://localhost:3000" protocol: "http:" host: "localhost:3000" hostname: "localhost" port: "3000" pathname: "/shop/" search: "" hash: "" href: "http://localhost:3000/shop/" assign: ƒ assign() reload: ƒ reload() toString: ƒ toString() replace: ƒ replace() valueOf: ƒ valueOf() Symbol(Symbol.toPrimitive): undefined __proto__: Location 1度目のクリック（#aaa） → Location {href: "http://localhost:3000/shop/", ancestorOrigins: DOMStringList, origin: "http://localhost:3000", protocol: "http:", host: "localhost:3000", …} ancestorOrigins: DOMStringList {length: 0} origin: "http://localhost:3000" protocol: "http:" host: "localhost:3000" hostname: "localhost" port: "3000" pathname: "/shop/" search: "" hash: "#aaa" href: "http://localhost:3000/shop/#aaa" assign: ƒ assign() reload: ƒ reload() toString: ƒ toString() replace: ƒ replace() valueOf: ƒ valueOf() Symbol(Symbol.toPrimitive): undefined __proto__: Location 2度目のクリック（#aaa） → Location {href: "http://localhost:3000/shop/", ancestorOrigins: DOMStringList, origin: "http://localhost:3000", protocol: "http:", host: "localhost:3000", …} ancestorOrigins: DOMStringList {length: 0} origin: "http://localhost:3000" protocol: "http:" host: "localhost:3000" hostname: "localhost" port: "3000" pathname: "/shop/" search: "" hash: "#aaa" href: "http://localhost:3000/shop/#aaa" assign: ƒ assign() reload: ƒ reload() toString: ƒ toString() replace: ƒ replace() valueOf: ƒ valueOf() Symbol(Symbol.toPrimitive): undefined __proto__: Location

Lhankor_Mhy

2020/01/06 04:07

クリックイベントを拾った時点ではURLが変わってないようですね。ハッシュ部分の拾い方を変えた方がいいのでは？

Lhankor_Mhy

2020/01/06 04:54

var hash = $(this).attr("href"); とすれば、とりあえずハッシュは取れると思います。

kii.32

2020/01/06 05:24

ありがとうございます！ var hash = $(this).attr("href"); でハッシュ取得することで解決できました！

行動規範の内容に同意します

回答1件

自己解決

ハッシュ取得をvar hash = $(this).attr("href");

とすることで無事解決できました！

js
1$(function () {
2
3    //.accordionの中の.ac_titleがクリックされたら
4    $('.accordion .ac_title').click(function () {
5
6        //クリックされた.accordionの中の.ac_titleに隣接するul要素が開いたり閉じたりする。
7        $(this).next('ul').slideToggle();
8        $(this).toggleClass("active");
9
10    });
11
12    //.accordionの中の.accordion_innerの中のli要素の中の.ac_sub-titleがクリックされたら
13    $('.accordion .accordion_inner li p').click(function () {
14
15        //クリックされた.accordionの中の.innerの中のli要素の中の.ac_sub-titleに隣接するul要素が開いたり閉じたりする。
16        $(this).next('ul').slideToggle();
17        $(this).toggleClass("active");
18    });
19
20
21
22    // areaを押すと、
23    // アンカーリンクしてアコーディオン開閉
24    $(".section01 area").not('.ac_title').click(function () {
25        //一旦全てのアコーディオン閉じる
26        $(".accordion ul").hide();
27        $(".ac_title").removeClass("active");
28        $(".ac_sub-title").removeClass("active");
29
30        //ハッシュ取得
31        var hash = $(this).attr("href");
32
33        $(hash).closest("ul").slideToggle();
34        $(hash).next("ul").slideToggle();
35        //アンカーリンクのズレを補正
36        var windowWidth = $(window).width();
37        var windowSm = 1230;
38        if (windowWidth <= windowSm) {
39            var headerHeight = 100;
40        } else {
41            var headerHeight = 120;
42        }
43
44        var position = $(hash).offset().top - headerHeight;
45        console.log(position);
46        $("html, body").animate({ scrollTop: position }, 550, "swing");
47        //アコーディオン処理
48
49    });
50});