我一直在为学校的项目创建这个应用程序，而我只是想让自己的头围绕jQuery。我在这里找到了一个很好的例子。我一直在尝试嵌入并用作滑块的菜单按钮。我很难让动画播放。
当我运行代码时，它似乎在播放，但后来又不追随。似乎还缺少一些元素。
这是我的代码，它也链接到CSS文件。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volo - X</title>
<meta name="description" content="Blueprint: Slide and Push Menus" />
<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<link href="STYLE.css" rel="stylesheet" type="text/css">
<script src="js/modernizr.custom.js"></script>
</head>
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<p>
</p>
<body onclick="myFunction()">
<div id="numberOne">
<img src="PHOTOS/menu.png"style="height:20px">
</div>
<div id="marginIncrease">
<a href="index.html">My Account</a>
</div>
<a href="Post A Job.html">Jobs</a>
<a href="Help.html">Help</a>
<a href="About - X.html"> About - X</a>
<div id="Facebook">
<a href="https://www.facebook.com">
<img src="PHOTOS/Facebook.png"style="height:40px">
</a>
</div>
<script>
$(document).ready(function () {
var trigger = $('#hamburger'),
isClosed = true;
trigger.click(function () {
burgerTime();
});
function burgerTime() {
if (isClosed == true) {
trigger.removeClass('is-open');
trigger.addClass('is-closed');
isClosed = false;
} else {
trigger.removeClass('is-closed');
trigger.addClass('is-open');
isClosed = true;
}
}
});
</script>
<script>
function myFunction() {
showLeft.onclick("myfuntion").disabled = true;
}
</script>
</nav>
<div class="container">
<header class="clearfix">
<p>
</span>
<div id="logo"
<h1><img src="PHOTOS/Volo x.png"style="max-width: 40%"></h1>
</div>
<nav>
</header>
<div class="main">
<section>
<h2> </h2>
<!-- BUTTON GOES IN HERE FOR TOP MENU
<button id="showLeft"></button>
-->
<button id="showLeft"></button>
<b>
<p style="line-height:2.5">
<font size="5" color="#939597">
// MY ACCOUNT
</p>
</font>
</b>
<p>
<font size="3" color="#F7941D">
<b>NAME:</b>
</font>
Matthew Arnott
<p>
<font size="3" color="#F7941D">
<b>ADDRESS: </font>
</b> 205 Galloway Street, HAMILTON
<p>
<font size="3" color="#F7941D">
<b>PHONE: </font></b> 021 938 737
<p>
<font size="3" color="#F7941D">
<b>EMAIL: </font></b> mat3tarnott@xtra.co.nz <p>
<font size="3" color="#F7941D">
<b>BALANCE:</b> </font>
$109.45
<p>
<font size="3" color="#F7941D">
<b>STATS: </font></b>31 Jobs Completed, 99% Positive Feedback
<p>
Last Payed at 2:33pm, 14th April 2015
<p>
<font size="3" color="#F7941D">
<b>MESSAGES:</font>
<font size="3" color="#000">
<a href="OPEN CHAT"> ( 1 )</a>
</font>
</p>
<p style="line-height:2.5">
<font size="5" color="#939597">
// CURRENT JOBS
</font>
<p>
<font size="3" color="#F7941D">
DRIVER LAST UPDATED: </font> 2:00PM, 1/4/15<p>
<font size="3" color="#F7941D">
<img src="PHOTOS/location.png"style="height:15px"> LOCATION: </font> Hamilton, Waikato<p>
<font size="3" color="#F7941D">
COST OF JOB:</font> $120
<p>
<font size="3" color="#F7941D">
JOB NUMBER</font> <a href="JOB INFO"> # 4397</a>
<p>
<font size="3" color="#F7941D">
<a href="OPEN CHAT">MESSAGE DRIVER</a>
</font>
</p>
</body>
<div id="hamburger" class="hamburglar is-open">
<div class="burger-icon">
<div class="burger-container"> <span class="burger-bun-top"></span> <span class="burger-filling"></span> <span class="burger-bun-bot"></span> </div>
</div>
<!-- svg ring containter -->
<div class="burger-ring"> <svg class="svg-ring">
<path class="path" fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 C 16.3 2 2 16.3 2 34 s 14.3 32 32 32 s 32 -14.3 32 -32 S 51.7 2 34 2" />
</svg> </div>
<!-- the masked path that animates the fill to the ring -->
<svg width="0" height="0">
<mask id="mask">
<path xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#ff0000" stroke-miterlimit="10" stroke-width="4" d="M 34 2 c 11.6 0 21.8 6.2 27.4 15.5 c 2.9 4.8 5 16.5 -9.4 16.5 h -4" />
</mask>
</svg>
<div class="path-burger">
<div class="animate-path">
<div class="path-rotation"></div>
</div>
</div>
</div>
</section>
<section class="buttonset">
</section>
</div>
</div>
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
}
</script>
<iframe src="https://www.google.com/maps/embed?pb=!1m22!1m12!1m3!1d100916.33952065148!2d175.26492379999996!3d-37.7751415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m7!1i0!3e0!4m0!4m3!3m2!1d-37.792778399999996!2d175.2717903!5e0!3m2!1sen!2snz!4v1429932205297" width="100%" height="300px" frameborder="0" style="border:0"></iframe>
<p>
<style type="text/css">
p { margin-left:1em;}
</style>
<font size="1" color="#939597">
Copyright © 2015 Volo - X, All Rights Reserved
</font>
<p>
</body>
</html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
您的HTML已畸形，这很可能是问题。您有2个车身标签，导航元素从其中一个开始，在另一个内部开始，只有2个我可以看到的问题。我建议将页面剥离回到基本结构，然后将代码逐一放回。您的基本HTML格式应为
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- scripts and css -->
</head>
<body>
<!-- HTML elements -->
</body>
</html>
另外，脚本和CSS应在可能而不是内联的。
有一个没有关闭> caracter的<div id="logo"，尝试查看是否是。
我建议在操纵DOM之前先了解基础知识。我几乎在阅读它时吐了。