我制作了我的第一个响应式导航栏，一切都很好，但是在移动方面，当我点击跨度时，我无法查看导航栏元素，如 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 回答
呼啦一阵风
TA贡献1802条经验 获得超6个赞
您的 JavaScript 正在引用$(".span-button")HTML 中不存在的内容。
在您的 JavaScript 中重命名$(".span-button")为。$(".span-btn")
慕标5832272
TA贡献1966条经验 获得超4个赞
“$ 未定义”这意味着 $ 是一个变量或您在使用 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");
});
});
添加回答
举报
0/150
提交
取消