当我单击MENU时，将调用左窗格，并且MENU单词将转换为单词EXIT。
当我单击退出时，左窗格关闭，单词退出转换为菜单。单击链接时，我希望左窗格关闭并且EXIT单词转换为MENU，即该左窗格中的按钮。但是我做错了，因为当我单击EXIT窗格中的链接时，MENU变得很疯狂。帮我弄清楚。这是工作代码：
"use strict";
(function ($) {
$(document).ready(function () {
$('.toggle-nav, a.button').on('click', function () {
toggleNavigation($(this), $('.nav-pane'));
changeLetters($(this));
});
function toggleNavigation(btn, nav) {
btn.toggleClass('open');
nav.toggleClass('open');
}
function changeLetters(btn) {
var m = $('.toggle-nav span.m');
var e = $('.toggle-nav span.e');
var n = $('.toggle-nav span.n');
var u = $('.toggle-nav span.u');
e.toggleClass('btn-close');
if (btn.hasClass('open')) {
m.text("E");
n.text("I");
u.text("T");
}
else {
m.text("M");
n.text("N");
u.text("U");
}
}
});
})(jQuery);body {
font-family: sans-serif;
background: #F1F1F1;
padding: 0;
margin: 0;
}
.nav-pane {
-webkit-transition: 250ms;
transition: 250ms;
position: fixed;
-webkit-transform: translateX(-350px);
transform: translateX(-350px);
top: 0;
height: 100vh;
width: 348px;
background: #EA5548;
border-right: 2px solid #e94d3f;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
justify-content: space-around;
box-shadow: 0px 3px 10px rgba(33, 33, 33, 0.5);
}
@media screen and (max-width: 620px) {
.nav-pane {
width: 298px;
-webkit-transform: translateX(-300px);
transform: translateX(-300px);
}
}
.nav-pane h1 {
margin: 0;
text-align: center;
color: #F1F1F1;
text-transform: uppercase;
font-size: 1.5rem;
}
.nav-pane.open {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transition: 250ms;
transition: 250ms;
}
.toggle-nav {
position: absolute;
top: 55px;
right: 25px;
cursor: pointer;
color: #212121;
}
.toggle-nav.open span.m, .toggle-nav.open span.n, .toggle-nav.open span.u {
opacity: 1;
}
.toggle-nav span.m, .toggle-nav span.n, .toggle-nav span.u {
font-size: 1.05rem;
opacity: 0;
-webkit-transition: 250ms;
transition: 250ms;
letter-spacing: 2px;
}
.toggle-nav span.e {
display: inline-block;
height: 12px;
width: 17px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(1) {
-webkit-transition: 250ms;
transition: 250ms;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(2) {
opacity: 0;
-webkit-transition: 250ms;
transition: 250ms;
}
.toggle-nav span.e.btn-close span.bar:nth-child(3) {
-webkit-transition: 250ms;
transition: 250ms;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 5px;
}
.toggle-nav span.e span.bar {
-webkit-transition: 250ms;
transition: 250ms;
position: relative;
display: block;
background: #212121;
border-radius: 1px;
border-bottom: 1px solid #616161;
width: 15px;
height: 1px;
}
.toggle-nav span.e span.bar:nth-child(2) {
margin: 3px 0;
}
.toggle-nav:hover span.m, .toggle-nav:hover span.n, .toggle-nav:hover span.u {
opacity: 1;
-webkit-transition: 250ms;
transition: 250ms;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Menu Toggle Effect</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div class="toggle-nav"><span class="m">M</span><span class="e"><span class="bar"></span><span class="bar"></span><span class="bar"></span></span><span class="n">N</span><span class="u">U</span></div>
<div class="nav-pane slide-out"><a class="button" href="#">Click me</a></div>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>https://codepen.io/ukropossum/pen/GRpLwjE
解决方案：
$(document).ready(function(){
$('.toggle-nav, a.button').on('click', function() {
toggleNavigation($('.toggle-nav'), $('.nav-pane'));
changeLetters($('.toggle-nav'));
});