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

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

新規登録して質問してみよう
ただいま回答率
87.20%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

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

kyonu
kyonu

総合スコア3

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

2回答

0評価

0クリップ

389閲覧

投稿2022/04/10 09:09

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

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

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>aaa</title> <link rel="stylesheet" href="./style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="./script.js"></script> </head> <body id="jump_01" class="pos_now"> <div class="contents"> <header> <div class="header_inner"> <h1 class="header_logo">タイトル</h1> <div class="nav_wrapper"> <div class="header_nav"> <nav class="nav_inner"> <ul class="menu"> <li class="menu_list"><a href="#jump_01" id="link_01">セクション1</a></li> <li class="menu_list"><a href="#jump_02" id="link_02">セクション2</a></li> <li class="menu_list"><a href="#jump_03" id="link_03">セクション3</a></li> <li class="menu_list"><a href="#jump_04" id="link_04">セクション4</a></li> <li class="menu_list"><a href="#jump_05" id="link_05">セクション5(アコーディオン)</a></li> <li class="menu_list"><a href="#jump_06" id="link_06">セクション6</a></li> <li class="menu_list"><a href="#jump_07" id="link_07">セクション7</a></li> <li class="menu_list"><a href="#jump_08" id="link_08">セクション8</a></li> <li class="menu_list"><a href="#jump_09" id="link_09">セクション9</a></li> <li class="menu_list"><a href="#jump_10" id="link_10">セクション10</a></li> </ul> </nav> </div> </div> </div> </header> <section class=" pos_now" id="jump_02"> <h2>セクション2</h2> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> <p>aaaaaaaaaaaaaa</p> </section> <section class="pos_now" id="jump_03"> <h2 >セクション3</h2> <div> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> <p>テキスト</p> </div> </section> <section class="pos_now" id="jump_04"> <h2 >セクション4</h2> <div> <p>テキストテキストテキストテキストテキストテキストテキ</p> </div> </section> <section class="pos_now" id="jump_05"> <h2 >セクション5(アコーディオン)</h2> <ul class="list"> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> </ul> <!-- 隠れている部分 --> <ul class="list hide"> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> <li> <div>aaa</div> <p>あああああ</p> </li> </ul> <!-- 隠れている部分 --> <button class="more">もっと見る</button> </section> <section class="pos_now" id="jump_06"> <h2 >セクション6</h2> <p>ああああああああああああああああ</p> </section> <section class="pos_now" id="jump_07"> <h2>タイトル7</h2> <p>ああああああああああああああああ</p> </section> <section class="pos_now" id="jump_08"> <h2>タイトル8</h2> <p>ああああああああああああああああ</p> </section> <section class="pos_now" id="jump_09"> <h2>タイトル9</h2> <p>ああああああああああああああああ</p> </section> <section class="pos_now" id="jump_10"> <h2>タイトル10</h2> <p>ああああああああああああああああ</p> </section> </body> </html>

CSS

body { font-size: 16px; color: #000000; background: #226a42; text-align: center; margin: 0; } h1,h2, p { margin: 0; } ul { list-style: none; } section { padding: 100px 0; } .contents { max-width: 414px; margin: auto; background: #fff; position: relative; z-index: 5; } .list { margin: 0; padding: 0; } .list li { width: 300px; margin: auto; border: 1px solid #226a42; margin-bottom: 20px; padding: 50px 0; } #jump_02 { background: #7fba9a; } #jump_04 { background: #7fba9a; } #jump_06 { background: #7fba9a; } #jump_08 { background: #7fba9a; } #jump_10 { background: #7fba9a; } /*アコーディオン*/ .more { display: block; background: #226a42; color: #fff; width: 275px; margin: auto; padding: 20px 0; position: relative; } .more::after { content: " "; position: absolute; width: 9px; height: 9px; border-top: solid 2px #fff; border-right: solid 2px #fff; -webkit-transform: rotate(135deg); transform: rotate(135deg); right: 32px; top: 24px; -webkit-transition: .5s; transition: .5s; } .more.on-click::after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 45%; } .hide { display: none; } /*ナビゲーションメニュー*/ .nav_wrapper { height: 100vh; right: 0; position: fixed; top: 0; width: 30%; z-index: 5; } .header_nav { background-color: #fff; height: 100%; width: 100%; z-index: 5; } .nav_inner { width: 100%; display: block; padding-top: 9.03vw; } .menu_list { margin-bottom: 30px; margin-right: 0; padding-left: 100px; position: relative; } .menu_list a { color: #226a42; font-weight: 600; } .menu_list a::before { content: ""; width: 25px; height: 1px; background: #226a42; position: absolute; left: 50px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .menu_list a.link_current::before { width: 60px; left: 15px; -webkit-transition: 0.5s; transition: 0.5s; }

jQuery

// アコーディオン $(function(){ $(".more").on("click", function() { $(this).toggleClass("on-click"); $(".hide").slideToggle(1000); }); }); // スムーススクロール $(function(){ $('.menu a[href^="#"]').click(function() { var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var headerHeight = 0;//固定ヘッダーの高さ if ($(target).length) { var position = $(target).offset().top-headerHeight; } $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); // ナビゲーションライン $(function () { var set = 20;// 発火させる位置 var boxTop = new Array; var current = -1; //各セクションにpos_nowを付与 $('.pos_now').each(function (i) { boxTop[i] = $(this).offset().top; }); changeBox(0); $(window).scroll(function () { scrollPosition = $(window).scrollTop(); for (var i = boxTop.length - 1; i >= 0; i--) { if ($(window).scrollTop() > boxTop[i] - set) { changeBox(i); break; } }; }); function changeBox(secNum) { if (secNum != current) { current = secNum; secNum2 = secNum + 1; $('.menu_list a').removeClass('link_current'); if (current == 0) { $('#link_01').addClass('link_current'); } else if (current == 1) { $('#link_02').addClass('link_current'); } else if (current == 2) { $('#link_03').addClass('link_current'); } else if (current == 3) { $('#link_04').addClass('link_current'); } else if (current == 4) { $('#link_05').addClass('link_current'); } else if (current == 5) { $('#link_06').addClass('link_current'); } else if (current == 6) { $('#link_07').addClass('link_current'); } else if (current == 7) { $('#link_08').addClass('link_current'); } else if (current == 8) { $('#link_09').addClass('link_current'); } else if (current == 9) { $('#link_10').addClass('link_current'); } } }; });

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

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。