我為移動用戶編寫了一個下拉菜單，但它不起作用。該網站是響應式的，因此您可以看到寬度為 700 像素的下拉菜單圖標。單擊該圖標后，應打開菜單，并且列表項應顯示在彼此頂部的列表中。我使用了 JavaScript：$(document).ready(function() { $(".fa-bars").on("click", function() { $("header nav ul li").toggleClass("open"); });});HTML: <!DOCTYPE html><html dir="ltr"> <head> <head> <meta charset="utf-8"> <title>Daniel | Website</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="../../js/mobile-menu.js"></script># <script src="js/lernen.js"></script> <link rel="stylesheet" type="text/css" href="../../css/all.css"> <link rel="stylesheet" type="text/css" href="style.css"> </head> </head> <body><!-- HEADER ----------------------------------------------------------------------------------------------> <header> <div id="logo"> <a href="../home/"><img src="../../img/logo.png" alt="Das Logo wurde nicht gefunden!!"></a> </div> <nav id="main-nav"> <i class="fa fa-bars" aria-hidden="true"></i> <ul> <li><a href="#home"> Lernen </a></li> <li><a href="#was"> Was? </a></li> <li><a href="#fuer-wen"> Für wen? </a></li> <li><a href="#kontakt"> Kontakt </a></li> <li><i class="fas fa-users-cog", id="user-cog"></i></li> </ul> </nav> </header>CSS：header nav ul li{ display: none; }header nav ul li.open{ display: block; float: none; padding-top: 10px; padding-bottom: 10px; }
單擊圖標后如何顯示我的列表項？
人到中年有點甜
2022-12-02 17:01:21
