Q&A
実現したいこと
menu-triggerを押すとメニューバーが表示される
前提
ここに質問の内容を詳しく書いてください。
(例)
TypeScriptで●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
menu-triggerが反応しない``` ### 該当のソースコード ```ここに言語名を入力 ■html <div class="menu-var"> <div class="menu-trigger"> <span></span> <span></span> </div> <nav class="g-navi"> <div class="nav-wrapper"> <ul class="ul"> <li class="li li-home"><a href="/top">HOME</a></li><br> <li class="li li-prof"><a href="/profile-edit">プロフィール編集</a></li><br> <li class="li"><a href="/logout">ログアウト</a></li> </ul> </div> </nav> </div> <!-- jsの読み込み --> <script src="{{ asset('js/script.js') }}"></script> <!-- jQueryの読み込み --> <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script> ■CSS .menu-var { position: fixed; top: 200px; left: 86%; color: white; text-align: center; } .menu-trigger span:nth-child(1) { position: fixed; top: 40px; /* 7px差 */ right: 113px; display: inline-block; transform: rotate(60deg); width: 13px; height: 1px; background-color: white; border: none; } .menu-trigger span:nth-child(2) { position: fixed; top: 40px; right: 120px; display: inline-block; transform: rotate(-60deg); width: 13px; height: 1px; background-color: white; border: none; } .menu-trigger.active span:nth-child(1) { position: absolute; top: 0px; left: 102px; display: inline-block; transform: rotate(-120deg); width: 13px; height: 1px; background-color: white; border: none; } .menu-trigger.active span:nth-child(2) { position: absolute; top: 0px; left: 95px; display: inline-block; transform: rotate(120deg); width: 13px; height: 1px; background-color: white; border: none; } .g-navi { transform: translateY(0%); transition: .5s ease-in-out; display: block; position: fixed; bottom: 236px; right: 0px; z-index: 3; width: 288px; height: 251px; background-color: aquamarine; } .g-navi ul { display: block; margin-top: 30px; } .g-navi ul li { display: block; margin-top: 22px; padding-bottom: 30px; } .li-home { border-bottom: 1px solid #6C6C6C; } .li-prof { border-bottom: 1px solid #6C6C6C; } .g-navi.active { transform: translateY(100%); transition: .5s ease-in-out; } ■js $(function () { $('.menu-trigger').click(function () { $(this).toggleClass('active'); if ($(this).hasClass('active')) { $('.g-navi').addClass('active'); } else { $('.g-navi').removeClass('active'); } }); $('.g-navi ul li a').click(function () { $('.menu-trigger').removeClass('active'); $('.g-navi').removeClass('active'); }); }); ### 発生している問題・エラーメッセージ
menu.triggerが反応しない
### 該当のソースコード ```ここに言語名を入力 .menu-trigger span:nth-child(1) { position: fixed; top: 40px; right: 113px; display: inline-block; transform: rotate(60deg); width: 13px; height: 1px; background-color: white; border: none; } .menu-trigger span:nth-child(2) { position: fixed; top: 40px; right: 120px; display: inline-block; transform: rotate(-60deg); width: 13px; height: 1px; background-color: white; border: none; } .menu-trigger.active span:nth-child(1) { position: absolute; top: 0px; /* 7px差 */ left: 102px; display: inline-block; transform: rotate(-120deg); width: 13px; height: 1px; background-color: white; border: none; } .menu-trigger.active span:nth-child(2) { position: absolute; top: 0px; left: 95px; display: inline-block; transform: rotate(120deg); width: 13px; height: 1px; background-color: white; border: none; }``` ### 試したこと jQueryが反応していない? ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/30 04:00
2023/03/30 04:14