我做了一個側面下拉菜單。 不工作

Question

我做了一個側面下拉菜單。 不工作。 請告訴我問題是什么菜單無法打開，也沒有顯示任何錯誤。 我已經盡我所能嘗試了一切，結果為零。

 function left_menu(selector){ let menu = $(selector); let button = menu.find('.left_menu_button'); let links = menu.find('.left_menu_link'); let overlay = menu.find('.left_menu_close_container'); button.on('click', (e) => { e.preventDefault(); loggleMenu(); }); links.on('click', () => loggleMenu()); overlay.on('click', () => loggleMenu()); function loggleMenu(){ menu.toggleClass('left_menu_main_div_active'); if(menu.hasClass('left_menu_main_div_active')){ $('body').css('overflow', 'hidden'); }else{ $('body').css('overflow', 'visible'); } } } left_menu('.left_menu_main_div');

 .left_menu_button{ position: absolute; left: 10px; z-index: 30; width: 50px; height: 50px; border-radius: 50%; }.left_menu_button:hover.left_menu_span{ background-color: black; width: 35px; height: 5px; transition: 0.4s; }.left_menu_button:hover.left_menu_span::after{ background-color: black; width: 35px; height: 5px; transition: 0.4s; margin-top: 2px; }.left_menu_button:hover.left_menu_span::before{ background-color: black; width: 35px; height: 5px; transition: 0.4s; margin-top: -2px; }.left_menu_span, .left_menu_span::after, .left_menu_span::before{ position: absolute; width: 30px; height: 4px; background-color: #1f1a1e; }.left_menu_span{ top: 50%; left: 50%; transform: translate(-50%, -50%); }.left_menu_span::before{ content: ''; top: -10px; }.left_menu_span::after{ content: ''; top: 10px; }.left_menu_main_div_active.left_menu_span{ background-color: transparent; }.left_menu_main_div_active.left_menu_span::before{ top: 0; transform: rotate(45deg); }.left_menu_main_div_active.left_menu_span::after{ top: 0; transform: rotate(-45deg); }.left_menu_nav{ padding-top: 55px; position: fixed; z-index: 20; display: flex; flex-flow: column; height: 100%; width: 20%; background-color: #2a2a2a; overflow-y: auto; left: -100%; }.left_menu_main_div_active.left_menu_nav{ left: 0; }.left_menu_link{ text-align: center; padding: 10px; font-size: 12px; text-decoration: none; text-transform: uppercase; letter-spacing: 5px; font-weight: bold; color: white; margin-top: 10px; }.left_menu_link:hover{ filter: brightness(0.7); border: 1px solid black; border-radius: 3px; transition: 0.7s; }.left_menu_close_container{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }.left_menu_main_div_active.left_menu_close_container{ display: block; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="left_menu_container"> <div class="left_menu_main_div"> <a href="#" class="left_menu_button"> <span class="left_menu_span"></span> </a> <nav class="left_menu_nav"> <a href="#" class="left_menu_link">Инвентарь</a> <a href="#" class="left_menu_link">Персонаж</a> <a href="#" class="left_menu_link">Ремесло</a> <a href="#" class="left_menu_link">Охота</a> </nav> <div class="left_menu_close_container"></div> </div> </div>

Answer 1

不應該function loggleMenu(是function ToggleMenu( ?

另外你在哪里加載 html 中的腳本？

將一些console.Log()調用彈出到腳本中，看看它在哪里啟動或失敗。