为什么我的移动菜单项在点击时不显示？
我制作了我的第一个响应式导航栏，一切都很好，但是在移动方面，当我点击跨度时，我无法查看导航栏元素，如 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>
慕斯王3回答
-
呼啦一阵风
您的 JavaScript 正在引用$(".span-button")HTML 中不存在的内容。在您的 JavaScript 中重命名$(".span-button")为。$(".span-btn") -
慕森卡
您在 JQuery 之前加载“index_p.js”。必须先加载 JQuery。 -
慕标5832272
“$ 未定义”这意味着 $ 是一个变量或您在使用 var 关键字声明它之前尝试使用的方法。你应该在链接外部 js 文件之前链接 jQuery，因为如果你做了相反的“你在你的代码上做了什么”，这将导致“$ 未定义”问题，我建议你在正文的末尾添加 js 文件所以你不会遇到那个错误，但如果你没有在正文末尾添加文件，你可以使用该代码：试试这个 html 代码：<!doctype html><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"> <!-- Font Awesome --> <script src="https://kit.fontawesome.com/5e64d08a4d.js"></script> <!-- Title --> <title>Pytheo</title> <!-- Logo (Favicon) --> <link rel="icon" href="#" type="image/x-icon"> </head> <body> <header> <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> <!-- 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>如果你在标题处导入了外部 JS，你应该使用它：$(document).ready(function(){ $(".span-button").on("click", function() {$('.navbar').toggleClass("show");});});
随时随地看视频慕课网APP
相关分类
JavaScript