ナビゲーション（ページ内リンク）で現在見ている箇所にスタイルをあてたいが不具合が起きる

ナビゲーション（ページ内リンク）に線をつけていて、現在見ているセクションに到達したら、その線を伸ばすという実装をしたいです。
現在上記の実装はほとんど完了しています。
しかし、セクション5にアコーディオンメニューを実装しており、そのアコーディオンを開いている際に、ナビゲーションの線が次のセクションにいるという認識になるのか、線が伸びてしまいます。こちらの不具合を解消したいです。

コードは下記になります。

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  <title>aaa</title>
9
10  <link rel="stylesheet" href="./style.css">
11  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
12  <script src="./script.js"></script>
13</head>
14
15<body id="jump_01" class="pos_now">
16  <div class="contents">
17    <header>
18      <div class="header_inner">
19        <h1 class="header_logo">タイトル</h1>
20
21        <div class="nav_wrapper">
22          <div class="header_nav">
23            <nav class="nav_inner">
24              <ul class="menu">
25                <li class="menu_list"><a href="#jump_01" id="link_01">セクション１</a></li>
26                <li class="menu_list"><a href="#jump_02" id="link_02">セクション２</a></li>
27                <li class="menu_list"><a href="#jump_03" id="link_03">セクション３</a></li>
28                <li class="menu_list"><a href="#jump_04" id="link_04">セクション４</a></li>
29                <li class="menu_list"><a href="#jump_05" id="link_05">セクション５（アコーディオン）</a></li>
30                <li class="menu_list"><a href="#jump_06" id="link_06">セクション６</a></li>
31                <li class="menu_list"><a href="#jump_07" id="link_07">セクション７</a></li>
32                <li class="menu_list"><a href="#jump_08" id="link_08">セクション８</a></li>
33                <li class="menu_list"><a href="#jump_09" id="link_09">セクション９</a></li>
34                <li class="menu_list"><a href="#jump_10" id="link_10">セクション１０</a></li>
35              </ul>
36            </nav>
37          </div>
38        </div>
39      </div>
40    </header>
41
42    <section class=" pos_now" id="jump_02">
43      <h2>セクション2</h2>
44
45      <p>aaaaaaaaaaaaaa</p>      
46      <p>aaaaaaaaaaaaaa</p>      
47      <p>aaaaaaaaaaaaaa</p>      
48    </section>
49
50    <section class="pos_now" id="jump_03">
51      <h2 >セクション３</h2>
52
53      <div>
54        <p>テキスト</p>
55        <p>テキスト</p>
56        <p>テキスト</p>
57        <p>テキスト</p>
58        <p>テキスト</p>
59      </div>
60    </section>
61
62    <section class="pos_now" id="jump_04">
63      <h2 >セクション4</h2>
64      <div>
65        <p>テキストテキストテキストテキストテキストテキストテキ</p>
66      </div>
67    </section>
68
69    <section class="pos_now" id="jump_05">
70      <h2 >セクション5(アコーディオン)</h2>
71
72      <ul class="list">
73        <li>
74          <div>aaa</div>
75          <p>あああああ</p>
76        </li>
77
78        <li>
79          <div>aaa</div>
80          <p>あああああ</p>
81        </li>
82
83        <li>
84          <div>aaa</div>
85          <p>あああああ</p>
86        </li>
87      </ul>
88
89      <!-- 隠れている部分 -->
90      <ul class="list hide">
91        <li>
92          <div>aaa</div>
93          <p>あああああ</p>
94        </li>
95
96        <li>
97          <div>aaa</div>
98          <p>あああああ</p>
99        </li>
100        
101        <li>
102          <div>aaa</div>
103          <p>あああああ</p>
104        </li>
105        
106        <li>
107          <div>aaa</div>
108          <p>あああああ</p>
109        </li>
110        
111        <li>
112          <div>aaa</div>
113          <p>あああああ</p>
114        </li>
115        
116        <li>
117          <div>aaa</div>
118          <p>あああああ</p>
119        </li>
120        
121        <li>
122          <div>aaa</div>
123          <p>あああああ</p>
124        </li>
125      </ul>
126      <!-- 隠れている部分 -->
127
128      <button class="more">もっと見る</button>
129    </section>
130
131    <section class="pos_now" id="jump_06">
132      <h2 >セクション6</h2>
133      <p>ああああああああああああああああ</p>
134    </section>
135
136    <section class="pos_now" id="jump_07">
137      <h2>タイトル7</h2>
138      <p>ああああああああああああああああ</p>
139    </section>
140
141    <section class="pos_now" id="jump_08">
142      <h2>タイトル8</h2>
143      <p>ああああああああああああああああ</p>
144    </section>
145
146    <section class="pos_now" id="jump_09">
147      <h2>タイトル9</h2>
148      <p>ああああああああああああああああ</p>
149    </section>
150
151    <section class="pos_now" id="jump_10">
152      <h2>タイトル10</h2>
153      <p>ああああああああああああああああ</p>
154    </section>
155</body>
156
157</html>

CSS
1body {
2  font-size: 16px;
3  color: #000000;
4  background: #226a42;
5  text-align: center;
6  margin: 0;
7}
8
9h1,h2, p {
10  margin: 0;
11}
12
13ul {
14  list-style: none;
15}
16
17section {
18  padding: 100px 0;
19}
20
21.contents {
22  max-width: 414px;
23  margin: auto;
24  background: #fff;
25  position: relative;
26  z-index: 5;
27}
28
29.list {
30  margin: 0;
31  padding: 0;
32}
33
34.list li {
35  width: 300px;
36  margin: auto;
37  border: 1px solid #226a42;
38  margin-bottom: 20px;
39  padding: 50px 0;
40}
41
42#jump_02 {
43  background: #7fba9a;
44}
45#jump_04 {
46  background: #7fba9a;
47}
48#jump_06 {
49  background: #7fba9a;
50}
51#jump_08 {
52  background: #7fba9a;
53}
54#jump_10 {
55  background: #7fba9a;
56}
57
58/*アコーディオン*/
59.more {
60  display: block;
61  background: #226a42;
62  color: #fff;
63  width: 275px;
64  margin: auto;
65  padding: 20px 0;
66  position: relative;
67}
68
69.more::after {
70  content: " ";
71  position: absolute;
72  width: 9px;
73  height: 9px;
74  border-top: solid 2px #fff;
75  border-right: solid 2px #fff;
76  -webkit-transform: rotate(135deg);
77          transform: rotate(135deg);
78  right: 32px;
79  top: 24px;
80  -webkit-transition: .5s;
81  transition: .5s;
82}
83
84.more.on-click::after {
85  -webkit-transform: rotate(-45deg);
86          transform: rotate(-45deg);
87  top: 45%;
88}
89
90.hide {
91  display: none;
92}
93
94/*ナビゲーションメニュー*/
95.nav_wrapper {
96  height: 100vh;
97  right: 0;
98  position: fixed;
99  top: 0;
100  width: 30%;
101  z-index: 5;
102}
103
104.header_nav {
105  background-color: #fff;
106  height: 100%;
107  width: 100%;
108  z-index: 5;
109}
110
111.nav_inner {
112  width: 100%;
113  display: block;
114  padding-top: 9.03vw;
115}
116
117.menu_list {
118  margin-bottom: 30px;
119  margin-right: 0;
120  padding-left: 100px;
121  position: relative;
122}
123
124.menu_list a {
125  color: #226a42;
126  font-weight: 600;
127}
128
129.menu_list a::before {
130  content: "";
131  width: 25px;
132  height: 1px;
133  background: #226a42;
134  position: absolute;
135  left: 50px;
136  top: 50%;
137  -webkit-transform: translateY(-50%);
138          transform: translateY(-50%);
139}
140
141.menu_list a.link_current::before {
142  width: 60px;
143  left: 15px;
144  -webkit-transition: 0.5s;
145  transition: 0.5s;
146}

jQuery
1// アコーディオン
2$(function(){
3  $(".more").on("click", function() {
4      $(this).toggleClass("on-click");
5      $(".hide").slideToggle(1000);
6  });
7});
8
9// スムーススクロール
10$(function(){
11  $('.menu a[href^="#"]').click(function() {
12    var speed = 1000;
13    var href= $(this).attr("href");
14    var target = $(href == "#" || href == "" ? 'html' : href);
15    var headerHeight = 0;//固定ヘッダーの高さ
16    if ($(target).length) {
17      var position = $(target).offset().top-headerHeight;
18    }
19    $('body,html').animate({scrollTop:position}, speed, 'swing');
20    return false;
21  });
22});
23
24// ナビゲーションライン
25$(function () {
26  var set = 20;// 発火させる位置
27  var boxTop = new Array;
28  var current = -1;
29  //各セクションにpos_nowを付与
30  $('.pos_now').each(function (i) {
31    boxTop[i] = $(this).offset().top;
32  });
33  changeBox(0);
34  $(window).scroll(function () {
35    scrollPosition = $(window).scrollTop();
36    for (var i = boxTop.length - 1; i >= 0; i--) {
37      if ($(window).scrollTop() > boxTop[i] - set) {
38        changeBox(i);
39        break;
40      }
41    };
42  });
43  function changeBox(secNum) {
44    if (secNum != current) {
45      current = secNum;
46      secNum2 = secNum + 1;
47      $('.menu_list a').removeClass('link_current');
48
49      if (current == 0) {
50        $('#link_01').addClass('link_current');
51      } 
52      else if (current == 1) {
53        $('#link_02').addClass('link_current');
54      } 
55      else if (current == 2) {
56        $('#link_03').addClass('link_current');
57      }
58      else if (current == 3) {
59        $('#link_04').addClass('link_current');
60      }
61      else if (current == 4) {
62        $('#link_05').addClass('link_current');
63      }
64      else if (current == 5) {
65        $('#link_06').addClass('link_current');
66      }
67      else if (current == 6) {
68        $('#link_07').addClass('link_current');
69      }
70      else if (current == 7) {
71        $('#link_08').addClass('link_current');
72      }
73      else if (current == 8) {
74        $('#link_09').addClass('link_current');
75      }
76      else if (current == 9) {
77        $('#link_10').addClass('link_current');
78      }
79    }
80  };
81});

試したことは下記になります。
・アコーディオンの箇所をdisplay: none;ではなく、opacity:0;にて実装する方法で試したが解決しなかった

以上になります。不足している説明等ありましたら、ご指摘いただけますと幸いです。
ご教授何卒よろしくお願いいたしますm(__)m

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

回答2件

　　　　　　分からない

投稿2022/04/10 12:29

tstetete

総合スコア2

ベストアンサー

jQuery
1boxTop[i] = $(this).offset().top;

ここでページにアクセスした際に、各セクションまでの距離を取得しています。

つまり、最初にアクセスした段階でセクション5の要素までの距離、高さはいくつで、その高さ分スクロールしたらセクション6の領域になると決まってしまいます。

しかし、セクション5はアコーディオン展開すると高さが変わってしまいます。
その為、不具合が起きるわけです。

ですので、これを解決するにはアコーディオンを開くボタンをクリックした際に、セクションの高さを再取得し直せば解決すると思います。

追記

いただいたアドバイスを参考に、また高さの取得方法を調べ、「もっと見る」ボタンをクリックした際に、セクションの高さを再取得するよう下記のように書き換えました。しかしうまく動作させることができませんでした。
もしよろしければ、高さを再取得する記述方法を教えていただけると嬉しく思います。
知識不足で申し訳ありません。何卒よろしくお願いいたしますm(__)m

もっと良いやり方は全然あると思いますが、いまのコードを活かすなら以下のような形で要望の動きにはなると思います。

function changeBox(secNum) {
︙
};
の下に、

jQuery
1$(".more").on("click", function() {
2  setTimeout(function(){
3   $('.pos_now').each(function (i) {
4     boxTop[i] = $(this).offset().top;
5   });
6   changeBox(4);
7 }, 1000);
8});

を入れる。

投稿2022/04/10 09:24

編集2022/04/10 11:27

kinchannel

総合スコア111

kyonu

2022/04/10 09:52

初めまして。分かりやすくご教授いただきありがとうございます！いただいたアドバイスを参考に、また高さの取得方法を調べ、「もっと見る」ボタンをクリックした際に、セクションの高さを再取得するよう下記のように書き換えました。しかしうまく動作させることができませんでした。もしよろしければ、高さを再取得する記述方法を教えていただけると嬉しく思います。知識不足で申し訳ありません。何卒よろしくお願いいたしますm(__)m // アコーディオン $(function(){ $(".more").on("click", function() { $('#jump_05').offset().top; $(this).toggleClass("on-click"); $(".hide").slideToggle(1000); }); });

kyonu

2022/04/10 12:02

ご返信とコードもありがとうございます！いただいたコードに変更したところ想定する動きになりました。おっしゃっていただいているように、もっと良いやり方で実装できるよう鍛錬したいと思います。この度は本当にありがとうございました。