时间戳

首页 > 解决方案 > 为什么我的 .js 文件没有在我的网站上运行？

javascript - 为什么我的 .js 文件没有在我的网站上运行？

问题描述

嘿，我正在为我的全栈课程做一个项目，我想为移动视图制作一个下拉菜单，但由于某种原因，我的 .js 文件不起作用，即使它与教程中看到的完全一样以及我见过的这样做的网站。

我已经尝试过用 Bootstrap 来做，但同样的事情发生了，一切都很完美，直到应用移动视图并且菜单不显示。

更确切地说，当我将我的网站切换到移动视图时，它会根据我的需要进行调整，但是当单击下拉菜单图标时，什么都没有显示，任何地方都没有菜单出现。

HTML：

<!DOCTYPE html>
<html lang="en">
   <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>Document</title>
      <link rel="stylesheet" href="css/main.css">
      <link rel="stylesheet" href="css/mediaqueries.css">
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap" rel="stylesheet">
      <link href='https://css.gg/menu.css' rel='stylesheet'>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
         integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
         crossorigin="anonymous" />
   </head>
   <body>
      <header>
         <nav id="menu">
            <ul>
               <li><a href="#">Inicio</a></li>
               <li><a href="#">Información</a></li>
               <li><a href="#">Sobre nosotros</a></li>
               <li><a href="#">Contacto</a></li>
            </ul>
         </nav>
         <div class="menu-toggle">
            <i class="fa fa-bars"></i>
         </div>
      </header>
      <!-- INICIO DEL HEADER -->
      <div class="header">
         <h1 class="title">DevHub - A Developer Matchmaking .</h1>
         <p class="description">CREA Y COMPARTE TUS IDEAS, ENCUENTRA COMPAÑEROS Y COMIENZA z DESARROLLAR</p>
      </div>
      <!-- FIN DEL HEADER -->
      <!-- SEGUNDA SECCIÓN -->
      <div class="section1">
         <a href="#" class="section1-perfil">
            <h2>Crea tu perfil</h2>
            <p class="profile-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum odio est
               ducimus dignissimos necessitatibus minus modi molestias hic! Quam, ex? Lorem ipsum dolor sit amet
               consectetur adipisicing elit. Ratione nobis esse incidunt aut ad itaque voluptatibus eligendi iste non
               voluptatem.
            </p>
         </a>
         <a href="#" class="section1-proyectos">
            <h3>Proyectos populares</h3>
            <p class="profile-description"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum odio est
               ducimus dignissimos necessitatibus minus modi molestias hic! Quam, ex? Lorem ipsum dolor sit amet
               consectetur adipisicing elit. Ratione nobis esse incidunt aut ad itaque voluptatibus eligendi iste non
               voluptatem.
            </p>
         </a>
      </div>
      <!-- FIN DE LA SEGUNDA SECCIÓN -->
      <script src="menu.js"></script>
   </body>
</html>

和我的 .js 文件：

let menuToggle = document.querySelector('.menu-Toggle');
let menuToggleIcon = document.querySelector('.menu-Toggle i');
let menu = document.getElementById('menu');
    
menuToggle.addEventListener('click', e => {
    menu.classList.toggle('show');
});

标签： javascript

解决方案

问题是您在大写 T 中使用“切换”，并且它应该是全小写的，正如它在您的 HTML 中所说的那样，试试这个：

let menuToggle = document.querySelector('.menu-toggle');
let menuToggleIcon = document.querySelector('.menu-toggle i');
let menu = document.getElementById('menu');

menuToggle.addEventListener('click',e=>{
    menu.classList.toggle('show');
});

另一件事可能是 ID 的 CSS# menu是冲突的，它不会使 .show类工作，看看这个例子，id 中没有样式，但隐藏了一个类：https ://jsfiddle.net/y42gaLq3/ 3/

推荐阅读