我正在尝试创建一个切换菜单，但用于切换功能的jQuery（/ 联系让我知道切换 /）不起作用，我无法弄清楚为什么.. ？
非常感谢协助： - ）
CSS：
/****Landscape****/
/*global styles*/
body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
}
a{
appearance: none;
font-size:1.05em;
font-family: Helvetica Neue, Helvetica, Arial, Sans-serif;
background:transparent;
color: #000000;
border:none;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
list-style: none;
text-decoration: none;
}
a:focus, a:hover {
color: #e6e8eb;
cursor:pointer;
transition: color 0.5s ease;
right: 0;
left: 0;
}
a:active { color: #484747; }
/*----/----global styles*/
/*contact panel*/
* {
font-family: "helvetica";
font-weight: normal;
font-size: 1em;
}
#wrapper {
width: 800px;
padding: 30px 20px;
text-align: center;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"] {
appearance: none;
width:100%;
height:50px;
font-size:1.05em;
background:transparent;
color: #e6e8eb;
border:none;
text-align: center;
letter-spacing:0.15em;
text-transform:uppercase;
transition: color 0.5s ease;
outline:none;
border:none;
}
[value*='Contact'], .module fieldset [type="submit"] [id="changetext"]:hover {
color: #464c4c;
cursor:pointer;
transition: color 0.5s ease;
}
.module {
width: 100%;
margin: 1rem auto;
padding: 1rem;
}
.module fieldset {
overflow: hidden;
border: none;
}
.module fieldset [type="text"] {
display: block;
margin: 0 auto;
width: 80%;
border: 0;
border-bottom: 1px solid rgba(0,0,0,.2);
line-height: 20px;
margin-bottom: 10px;
font-size: 1em;
color: rgba(0,0,0,.4);
width: 50%;
padding: 0.5rem;
}
.single {
height: 25px;
}
.module fieldset textarea {
display: block;
width: 100%;
padding: 1rem;
height: 125px;
}
/*----/----contact form*/
/*Nav Bar*/
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
.nav {
background: #ffffff;
float: right;
text-align: right;
}
.nav > li {
display: inline-block;
padding: 2px;
padding-right: 30px;
}
/*----/----Nav Bar*/
/*Panels*/
.panel {
width: 100%;
background: #D8D7D7;
color: #ffffff;
height: 40em;
padding: 3em;
box-sizing: border-box;
}
.links{
color: #ffffff;
}
.panel .inner {
padding-top: 10%;
color: #df
}
.panel.panel-blank {
background: #ffffff;
color: #000000;
}
/*----/----Panels*/
/*logo*/
.logo {
float:left;
display: inline-block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/****Portrait****/
@media (max-width: 850px) {
/*global styles*/
.body {
width: 100%;
margin: 0;
list-style: none;
text-decoration: none;
}
.header {
background: #ffffff;
width: 100%;
position: fixed;
top: 0;
left: 0;
}
.nav {
position: fixed;
width: 100%;
text-align: center;
display: none;
background-color: #ffffff;
left: 0;
top: 39px;
}
.nav > li {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
}
.nav > li:hover {
postition: absolute;
display: block;
left: 0;
width: 100%;
padding-top: 0.6em;
padding-bottom: 1em;
cursor:pointer;
}
/*----/----global styles*/
/*logo*/
.logo {
float:left;
display: block;
width: 15px;
height: 15px;
padding: 18px;
cursor: pointer;
}
/*----/----logo*/
/*navigation icon*/
#toggle-menu {
float:right;
display: block;
width: 15px;
height: 15px;
padding: 20px;
}
#toggle-menu div {
width: 15px;
height: 15px;
position: relative;
}
#toggle-menu span {
display: block;
width: 15px;
height: 3px;
background: black;
position: absolute;
-webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s;
-webkit-transform-origin: center;
-moz-transform-origin: center;
transform-origin: center;
}
#toggle-menu span.top {
top: 0px;
}
#toggle-menu span.middle {
top: 6px;
}
#toggle-menu span.bottom {
top: 12px;
}
/*----/----navigation icon*/
/*navigation icon animation*/
#toggle-menu.menu-is-active span {
-webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
-moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
#toggle-menu.menu-is-active span.top, #toggle-menu.menu-is-active span.middle {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
#toggle-menu.menu-is-active span.middle {
opacity: 0;
}
#toggle-menu.menu-is-active span.bottom {
top: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/*----/----navigation icon animation*/
}
/*----/----Portrait*/
.follow {
text-align: center;
}
.footer {
margin: 0 auto;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
/*social icons*/
.social-buttons {
height: 45px;
font-size: 0;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
.social-button {
display: inline-block;
background-color: #fff;
width: 45px;
height: 45px;
line-height: 45px;
margin: 0 10px;
text-align: center;
position: relative;
overflow: hidden;
opacity: .99;
border-radius: 50%;
box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
content: '';
background-color: #000;
width: 120%;
height: 120%;
position: absolute;
top: 90%;
left: -110%;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
font-size: 38px;
vertical-align: middle;
-webkit-transform: scale(0.8);
-ms-transform: scale(0.8);
transform: scale(0.8);
-webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button.facebook:before {
background-color: #3B5998;
}
.social-button.facebook .fa {
color: #3B5998;
}
.social-button.twitter:before {
background-color: #3CF;
}
.social-button.twitter .fa {
color: #3CF;
}
.social-button.google:before {
background-color: #DC4A38;
}
.social-button.google .fa {
color: #DC4A38;
}
.social-button.dribbble:before {
background-color: #F26798;
}
.social-button.dribbble .fa {
color: #F26798;
}
.social-button.skype:before {
background-color: #00AFF0;
}
.social-button.skype .fa {
color: #00AFF0;
}
.social-button:focus:before, .social-button:hover:before {
top: -10%;
left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
color: #fff;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
jQuery的：
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script>
jQuery(document).ready(function () {
$(window).resize(function(){
if ($(window).width() >=850) {
$(".nav").show();
}
else{ $(".nav").hide();}
});
$('#toggle-menu').click(function () {
$(this).toggleClass('menu-is-active')
});
/* click outside of nav to trigger navigation icon animation*/
$(document).click(function () {
$("#toggle-menu").removeClass();
});
$("nav").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----navigation icon animation*/
/*toggle menu*/
jQuery("#toggle-menu").click(function () {
jQuery(".nav").slideToggle();
});
/* click outside of nav to close toggle*/
$(document).click(function () {
if ($(window).width() < 850) {
$(".nav").hide();
} else {
$(".nav").show();
}
});
$("#toggle-menu").click(function (e) {
e.stopPropagation();
return false;
});
/*----/----toggle menu*/
/*Jump Scroll*/
$(function() {
var $window = $(window), $document = $(document),
transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support
scrollTime = 1; // scroll time in seconds
$(document).on("click", "a[href*=#]:not([href=#])", function(e) {
var target, avail, scroll, deltaScroll;
if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) {
target = $(this.hash);
target = target.length ? target : $("[id=" + this.hash.slice(1) + "]");
if (target.length) {
avail = $document.height() - $window.height();
if (avail > 0) {
scroll = target.offset().top;
if (scroll > avail) {
scroll = avail;
}
} else {
scroll = 0;
}
deltaScroll = $window.scrollTop() - scroll;
// if we don't have to scroll because we're already at the right scrolling level,
if (!deltaScroll) {
return; // do nothing
}
e.preventDefault();
if (transitionSupported) {
$("html").css({
"margin-top": deltaScroll + "px",
"transition": scrollTime + "s ease-in-out"
}).data("transitioning", scroll);
} else {
$("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it)
.animate({
scrollTop: scroll + "px"
}, scrollTime * 1000);
return;
}
}
}
});
if (transitionSupported) {
$("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) {
var $this = $(this),
scroll = $this.data("transitioning");
if (e.target === e.currentTarget && scroll) {
$this.removeAttr("style").removeData("transitioning");
$("html, body").scrollTop(scroll);
}
});
}
});
/*----/----Jump Scroll*/
/*contact let me know toggle*/
jQuery(document).ready(function () {
$("#measure").hide();
$("#changetext").on('click', function() {
if($("#measure").is(":visible"))
return false;
$("#changetext").toggle();
this.value = this.value == 'send message' ? 'contact' : 'send message';
});
$("#send").on('click', function() {
$("#measure").toggle();
$("#changetext").val('thank you');
});
/*----/-----contact let me know toggle*/
});
</script>
HTML：
<div class="header">
<div class="navbar">
<a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a>
<a id="toggle-menu">
<div>
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
</a>
<ul class="nav">
<li><a href="" style="display: inline-block; width:100%;">Home</a></li>
<li><a href="#panel9" style="display: inline-block; width:100%;">About</a></li>
<li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li>
<li><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li>
</ul>
</div>
</div>
<div class="maincontent">
<div class="panel multiplepanels" id="panel1">
<div class="inner"> 1 </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel2">
<div class="inner"> <p>Work Title 1</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div>
</div>
<div class="panel multiplepanels" id="panel3">
<div class="inner"> <p>Work Title 2</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel4">
<div class="inner"> <p>Work Title 3</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div>
</div>
<div class="panel multiplepanels" id="panel5">
<div class="inner"> <p>Work Title 4</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div>
</div>
<div class="panel panel-blank multiplepanels" id="panel6">
<div class="inner"> <p>Work Title 5</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div>
</div>
<div class="panel multiplepanels" id="panel7">
<div class="inner"> <p>Work Title 6</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div>
</div>
<div id='wrapper' >
<input type='submit' value='Contact' id="changetext">
<div class='module' id='measure'>
<p></p>
<fieldset>
<legend></legend>
<input class="single" type='text' placeholder='Name' />
<input class="single" type='text' placeholder='Email' />
<input class="single" type='text' placeholder='Phone' />
<textarea class="message" type='text' placeholder='Message' > </textarea>
<input type='submit' id="send">
</fieldset>
</div>
</div>
<div class="follow">Follow Me</div>
<div class="social-buttons"><a href="#" class="social-button facebook"> <i class="fa fa-facebook"></i></a><a href="#" class="social-button twitter"><i class="fa fa-twitter"></i></a><a href="#" class="social-button google"><i class="fa fa-google"></i></a><a href="#" class="social-button dribbble"><i class="fa fa-dribbble"></i></a><a href="#" class="social-button skype"><i class="fa fa-skype"></i></a>
</div>
<div id="footer">
<p> Copywright © 2015 </p>
</div>