猿问

为什么我的移动菜单项在点击时不显示？

我制作了我的第一个响应式导航栏，一切都很好，但是在移动方面，当我点击跨度时，我无法查看导航栏元素，如 HOME、ABOUT 等......


我使用了 HTML 、 CSS 、 JavaScript


现在，问题出在 CSS 媒体查询上！！


所以请帮我解决这个问题！！！


这是我的代码...


HTML


<!doctype html>

<html>


    <!-- HEAD OF HTML -->

  <head>


    <!-- Required Meta-tags -->

    <meta charset="utf-8">

    <meta content="width=device-width, initial-scale=1" name="viewport" />

    <meta name="theme-color" content="#1C1C1C">

    <meta name="description" content="">

    <meta name="robots" content="index, follow">

    <!-- External CSS files -->

    <link rel="stylesheet" href="index_p.css">

    <!-- External JavaScript files 

    <script src="index_p.js"></script> -->

    <!-- Font Awesome -->

    <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>

    <!-- JQuery

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    JQuery Ajax

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->

    <!-- Title -->

    <title>Pytheo</title>

    <!-- Logo (Favicon) -->

    <link rel="icon" href="Logo.png" type="image/x-icon">


  </head>


  <body>


      <!-- HEADER -->

  <header>

      <!-- NAVBAR -->

    <div class="navbar">

            <div class="logo">

          <h3>Pytheo</h3>

        </div>

        <a class="span-btn">

          <span></span>

          <span></span>

          <span></span>

        </a>

            <div class="navBar">

                <a class="active" href="#">Home</a>

            <a href="#">About</a>

            <a href="#">Contact</a>

            <a href="#">Author</a>

          <span>

            <a class="spec" href="#">Articles</a>

            </span>


            </div>

        </div>

  </header>


          <!-- JAVASCRIPT FILES -->


    <!-- JQuery -->

    <!-- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> -->

    <!-- JQuery Ajax -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- External JavaScript files -->

    <script src="index_p.js"></script>


  </body>

</html>


慕斯王
浏览 150回答 3
3回答

呼啦一阵风

您的 JavaScript 正在引用$(".span-button")HTML 中不存在的内容。在您的 JavaScript 中重命名$(".span-button")为。$(".span-btn")
0

慕森卡

您在 JQuery 之前加载“index_p.js”。必须先加载 JQuery。
0

慕标5832272

“$ 未定义”这意味着 $ 是一个变量或您在使用 var 关键字声明它之前尝试使用的方法。你应该在链接外部 js 文件之前链接 jQuery，因为如果你做了相反的“你在你的代码上做了什么”，这将导致“$ 未定义”问题，我建议你在正文的末尾添加 js 文件所以你不会遇到那个错误，但如果你没有在正文末尾添加文件，你可以使用该代码：试试这个 html 代码：<!doctype html><html>&nbsp; <head>&nbsp; &nbsp; <!-- Required Meta-tags -->&nbsp; &nbsp; <meta charset="utf-8">&nbsp; &nbsp; <meta content="width=device-width, initial-scale=1" name="viewport" />&nbsp; &nbsp; <meta name="theme-color" content="#1C1C1C">&nbsp; &nbsp; <meta name="description" content="">&nbsp; &nbsp; <meta name="robots" content="index, follow">&nbsp; &nbsp; <!-- External CSS files -->&nbsp; &nbsp; <link rel="stylesheet" href="index_p.css">&nbsp; &nbsp;&nbsp; &nbsp; <!-- Font Awesome -->&nbsp; &nbsp; <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script>&nbsp;&nbsp;&nbsp; &nbsp; <!-- Title -->&nbsp; &nbsp; <title>Pytheo</title>&nbsp; &nbsp; <!-- Logo (Favicon) -->&nbsp; &nbsp; <link rel="icon" href="#" type="image/x-icon">&nbsp; </head>&nbsp; <body>&nbsp; <header>&nbsp; &nbsp; <div class="navbar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="logo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>Pytheo</h3>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <a class="span-btn">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span></span>&nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="navBar">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="active" href="#">Home</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">About</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Contact</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Author</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="spec" href="#">Articles</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; </header>&nbsp; &nbsp; <!-- JQuery -->&nbsp; &nbsp; <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>&nbsp; &nbsp; <!-- JQuery Ajax -->&nbsp; &nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>&nbsp;<!-- External JavaScript files -->&nbsp; &nbsp; <script src="index_p.js"></script></body></html>如果你在标题处导入了外部 JS，你应该使用它：$(document).ready(function(){&nbsp; $(".span-button").on("click", function() {$('.navbar').toggleClass("show");});});
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答