移动菜单切换不起作用

Question

I found this Responsive Navigation originally on CodePen https://codepen.io/MarcRay/pen/vmJBn 我最初在CodePen https://codepen.io/MarcRay/pen/vmJBn上找到了这种响应式导航

I wanted to play around with it on a website. 我想在网站上玩它。 I've never tried to link JavaScript before. 我以前从未尝试过链接JavaScript。 Which I believe might be my problem. 我认为这可能是我的问题。

I made index.html, style.css, and javascript.js files and copied the codes into it exactly as they show. 我制作了index.html，style.css和javascript.js文件，并按照显示的代码完全复制了其中的代码。 Originally the navigation wasn't showing up at all. 最初，导航根本不显示。 I had it listed as such in my index.html file: 我在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>

After searching I ended up adding: 搜索后，我最终添加：

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

So it became: 这样就变成了：

<!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>

After I added this I was able to get the nav to display and function properly when I scrolled on desktop. 添加此选项后，当我在桌面上滚动时，我就能够显示导航并正常运行。 Could have just been a coincidence. 可能只是一个巧合。

My dilemma now is that when the mobile nav pops up and I click on the hamburger icon it doesn't drop down. 现在的难题是，当移动导航弹出时，我单击汉堡包图标时，它不会下拉。

Here it functions as it should on JSFiddle: http://jsfiddle.net/xpvt214o/636545/ 在这里，它可以在JSFiddle上正常运行： http : //jsfiddle.net/xpvt214o/636545/

I ran the console and no errors showed. 我运行了控制台，但未显示任何错误。 Am I not linking the JavaScript/jQuery files correctly? 我是否无法正确链接JavaScript / jQuery文件？ Perhaps the JavaScript code is invalid? 也许JavaScript代码无效？ It works fine on CodePen and JSFiddle. 它在CodePen和JSFiddle上运行良好。

Answer 1

Why you are using 2 versions of jquery , remove <script src="https://code.jquery.com/jquery-1.9.1.js"></script> from your head tag. 为什么要使用2个版本的jquery， <script src="https://code.jquery.com/jquery-1.9.1.js"></script>从head标签中删除<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 。 if not work then keep version jquery-1.9.1.js and remove version jquery-3.3.1.min.js. 如果不起作用，请保留版本jquery-1.9.1.js并删除版本jquery-3.3.1.min.js。

移动菜单切换不起作用

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-18 13:15:51

移动菜单切换不起作用

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-18 13:15:51

解决方案1
0 已采纳 2018-08-18 13:15:51