Solo estaba tratando de probar esta barra de navegación receptiva, pero parece que el javascript no se está conectando. Puse la etiqueta del script en la parte inferior del cuerpo porque escuché que es el mejor lugar para ponerlo, pero no funciona.
índice.html
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Omnii</title> <link rel="stylesheet" href="index.css"> </head> <body> <section class="navigation"> <div class="nav-container"> <div class="brand"> <a href="#!">Omnii</a> </div> <nav> <div class="nav-mobile"><a id="navbar-toggle" href="#!"><span></span></a></div> <ul class="nav-list"> <li> <a href="#!">Home</a> </li> <li> <a href="#!">About</a> </li> <li> <a href="#!">Devs</a> </li> <li> <a href="#!">Docs</a> </li> <li> <a href="#!">Sign in</a> </li> </ul> </nav> </div> </section> <section> <center><h1>Reality, enhanced</h1></center> </section> <script src="index.js"></script> </body> </html>índice.js
(function ($) { $(function () { // open and close nav $("#navbar-toggle").click(function () { $("nav ul").slideToggle(); }); // Hamburger toggle $("#navbar-toggle").on("click", function () { this.classList.toggle("active"); }); }); })(jQuery);¿Qué debo hacer?
Puedo ver que está usando el signo de dólar ($), lo que significa que jQuery debe incluirse primero antes de agregar el archivo index.js. NB: el orden debe ser jQuery primero y luego sigue su archivo index.js personalizado
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="index.js"></script>