jQuery切换菜单不起作用

Question

所以我发现这个jquery为我的网站切换手机菜单，我编辑它一点。当我完成编辑时，我意识到当我点击x关闭它时，它不会关闭。我尝试了一切，但似乎无法解决问题。任何人都可以帮忙吗？ 这里的JSFiddle

HTML：

<a href="#menu" id="toggle"><span></span></a> 
<div id="menu"> 
<ul> 
<li><a href="#home">News</a></li> 
<li><a href="#about">Biografia</a></li> 
<li><a href="#contact">Zara Larsson Italia</a></li> 
<li><a href="#contact">Contattaci</a></li> 
<li><a href="#contact">Facebook</a></li> 
<li><a href="#contact">Twitter</a></li> 
</ul> 
</div> 

CSS：

#toggle { 
    display: block; 
    width: 28px; 
    height: 30px; 
    position:fixed; 
    top:35px; 
    left:30px; 
} 

#toggle span:after, 
#toggle span:before { 
    content: ""; 
    position: absolute; 
    left: 0; 
    top: -9px; 
} 
#toggle span:after{ 
    top: 9px; 
} 
#toggle span { 
    position: relative; 
    display: block; 
} 

#toggle span, 
#toggle span:after, 
#toggle span:before { 
    width: 100%; 
    height: 4px; 
    background-color: #000; 
    transition: all 0.3s; 
    backface-visibility: hidden; 
    border-radius: 0px; 
} 

/* on activation */ 
#toggle.on span { 
    background-color: transparent; 
} 
#toggle.on span:before { 
    transform: rotate(45deg) translate(5px, 5px); 
} 
#toggle.on span:after { 
    transform: rotate(-45deg) translate(7px, -8px); 
} 
#toggle.on + #menu { 
    opacity: 1; 
    visibility: visible; 
} 

/* menu appearance*/ 
#menu { 
    position: absolute; 
    color: #999; 
    width: 100%; 
    margin: auto; 
    text-align: center; 
    background: white; 
    /* just for this demo */ 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .4s; 
    margin-top:75px; 
    font-weight:700; 
    text-decoration:none; 
    text-transform:uppercase; 
    color: #000; 
} 
#menu:after { 
    position: absolute; 
    top: -15px; 
    left: 95px; 
    content: ""; 
    display: block; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
} 
#menu ul, #menu li, #menu li a { 
    list-style: none; 
    display: block; 
    margin: 0; 
    padding: 0; 
} 
#menu li a { 
    padding: 15px; 
    color: #888; 
    text-decoration: none; 
    font-weight:700; 
    text-decoration:none; 
    text-transform:uppercase; 
    color: #000; 
} 
#menu li a:hover, 
#menu li a:focus { 
    background: #000; 
    color: #fff; 

} 

的Javascript：

var theToggle = document.getElementById('toggle'); 
function hasClass(elem, className) { 
    return new RegExp(' ' + className + ' ').test(' ' + elem.className + ' '); 
} 
function addClass(elem, className) { 
    if (!hasClass(elem, className)) { 
     elem.className += ' ' + className; 
    } 
} 
function removeClass(elem, className) { 
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; 
    if (hasClass(elem, className)) { 
     while (newClass.indexOf(' ' + className + ' ') >= 0) { 
      if (window.CP.shouldStopExecution(1)) { 
       break; 
      } 
      newClass = newClass.replace(' ' + className + ' ', ' '); 
     } 
     elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
     window.CP.exitedLoop(1); 
    } 
} 
function toggleClass(elem, className) { 
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, ' ') + ' '; 
    if (hasClass(elem, className)) { 
     while (newClass.indexOf(' ' + className + ' ') >= 0) { 
      if (window.CP.shouldStopExecution(2)) { 
       break; 
      } 
      newClass = newClass.replace(' ' + className + ' ', ' '); 
     } 
     elem.className = newClass.replace(/^\s+|\s+$/g, ''); 
     window.CP.exitedLoop(2); 
    } else { 
     elem.className += ' ' + className; 
    } 
} 
theToggle.addEventListener("click", function(){ 
    toggleClass(this, 'on'); 
    return false; 
}); 

Answer 1

使用此功能切换className：

function toggleClass(elem, className) { 
    var classes = elem.className.split(' '); 
    var i = classes.indexOf(className); 
    if(i == -1) 
     classes.push(className); 
    else 
     classes.splice(i,1); 
    elem.className = classes.join(' '); 
} 

但是，您可以简单地在jQuery中使用$(this).toggleClass('on')。