Question

我最初在CodePen上找到了这种响应式导航 https://codepen.io/MarcRay/pen/vmJBn

我想在网站上玩它。我以前从未尝试过链接JavaScript。我认为这可能是我的问题。

我制作了index.html，style.css和javascript.js文件，并按照显示的代码完全复制了代码。最初，导航根本不显示。我已经在index.html文件中列出了它：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="javascript.js"></script>
</head>

搜索后，我最终添加：

<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

它变成了：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link href='style.css' rel='stylesheet' type='text/css'>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="javascript.js"></script>
</head>

添加此内容后，当我在桌面上滚动时，我能够使导航显示并正常运行。可能只是巧合。

我现在的困境是，当移动导航弹出时，我单击汉堡包图标时，它不会下拉。

此处在JSFiddle上应有的功能：http://jsfiddle.net/xpvt214o/636545/

我运行了控制台，但未显示任何错误。我是否无法正确链接JavaScript / jQuery文件？也许JavaScript代码无效？它在CodePen和JSFiddle上运行良好。

Answer 1

为什么要使用2个版本的jquery，请从您的head标签中删除<script src="https://code.jquery.com/jquery-1.9.1.js"></script>。如果不起作用，请保留版本jquery-1.9.1.js并删除版本jquery-3.3.1.min.js。

移动菜单切换不起作用

1 个答案: