我的网站上有一个弹出式菜单，但目前无法按预期工作。
这是我的演示：http://jsfiddle.net/chx1y5w6/
有人可以解释为什么当我点击汉堡菜单按钮时，菜单没有弹出？
(function(window){
'use strict';
function classReg( className ) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' ' );
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;
fn( elem, c );
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if ( typeof define === 'function' && define.amd ) {
// AMD
define( classie );
} else {
// browser global
window.classie = classie;
}
})( window );
/* Toggle Menu */
(function () {
'use strict';
var toggleX = document.querySelector('.toggle-x');
var classActive = 'active';
var innerDiv = document.createElement('div');
innerDiv.className = 'toggle-icon-line';
toggleX.appendChild(innerDiv);
toggleX.addEventListener('click', onClickHandler);
function onClickHandler (evt) {
(this.classList.contains(classActive) === true ) ? this.classList.remove(classActive):this.classList.add(classActive);
if($('body').hasClass('show-menu')){
toggleMenu();
}
$(document).keyup(function(e) {
if (e.keyCode == 27) { // escape key maps to keycode `27`
toggleMenu();
}
});
var bodyEl = document.body,
content = document.querySelector( '.content-wrap' ),
openbtn = document.getElementsByClassName( 'toggle-x' ),
closebtn = document.getElementsByClassName( 'toggle-x' ),
isOpen = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
}
else {
classie.add( bodyEl, 'show-menu' );
}
isOpen = !isOpen;
}
init();
}
})();/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}.wrapper{text-align:center;background:rgba(0,0,0,0);padding:0 0;margin:0 0 0 0;font-size:0}
.toggle{position:relative;overflow:hidden;display:inline-block;margin:0;padding:0;width:48px;height:48px;border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:nd 0.3s}.toggle:focus{outline:none}.toggle .toggle-icon-line{position:absolute;top:23px;left:12px;right:12px;height:2px;background:white}.toggle .toggle-icon-line::before,.toggle .toggle-icon-line::after{content:'';position:absolute;display:block;height:2px;background-color:white;left:0;width:100%}.toggle .toggle-icon-line::before{top:-9px}.toggle .toggle-icon-line::after{bottom:-9px}.toggle-x{background-color:#00b4ff}.toggle-x:hover{background-color:#007eb2}.toggle-x .toggle-icon-line{transition:background 0s linear 0.3s}.toggle-x .toggle-icon-line::before{transition-property:top,-webkit-transform;transition-property:top,transform}.toggle-x .toggle-icon-line::after{transition-property:bottom,-webkit-transform;transition-property:bottom,transform}.toggle-x .toggle-icon-line::before,.toggle-x .toggle-icon-line::after{transition-duration:0.3s,0.3s;transition-delay:0.3s,0s}.toggle-x.active{background-color:#007eb2}.toggle-x.active .toggle-icon-line{background:none}.toggle-x.active .toggle-icon-line::before{top:0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.toggle-x.active .toggle-icon-line::after{bottom:0;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.toggle-x.active .toggle-icon-line::before,.toggle-x.active .toggle-icon-line::after{transition-delay:0s,0.3s}
.toggle {
position: relative;
overflow: hidden;
display: inline-block;
margin: 0;
padding: 0;
width: 48px;
height: 48px;
border-radius: 50%;
cursor: pointer;
-webkit-tap-highlight-color:rgba(0,0,0,0);
transition: background 0.3s;
}
.toggle:focus {
outline: none;
}
.toggle .toggle-icon-line {
position: absolute;
top: (48 / 2) - (48 / 2);
left: 12px;
right: 14px;
height: 2px;
background: rgb(255, 255, 255);
}
.toggle .toggle-icon-line::before,
.toggle .toggle-icon-line::after {
content: '';
position: absolute;
display: block;
height: 2px;
background-color: rgb(255, 255, 255);
left: 0;
width: 100%;
}
.toggle .toggle-icon-line::before {
top: -( (48 / 2) - (48 / 2) - 14);
}
.toggle .toggle-icon-line::after {
bottom: -( (48 / 2) - (48 / 2) - 14);
}
.toggle-x {
background-color: rgb(0, 180, 255);
}
.toggle-x:hover {
background-color: rgb(0, 126, 178);
}
.toggle-x .toggle-icon-line {
transition: background 0s linear 0.3s;
}
.toggle-x .toggle-icon-line::before {
transition-property: top, transform;
}
.toggle-x .toggle-icon-line::after {
transition-property: bottom, transform;
}
.toggle-x .toggle-icon-line::before,
.toggle-x .toggle-icon-line::after {
transition-duration: 0.3s, 0.3s;
transition-delay: 0.3s, 0s;
}
.toggle-x.active {
background-color: rgb(0, 126, 178);
}
.toggle-x.active .toggle-icon-line {
background: none;
}
.toggle-x.active .toggle-icon-line::before {
top: 0;
transform: rotate(45deg);
}
.toggle-x.active .toggle-icon-line::after {
bottom: 0;
transform: rotate(-45deg);
}
.toggle-x.active .toggle-icon-line::before,
.toggle-x.active .toggle-icon-line::after {
transition-delay: 0s, 0.3s;
}
.menu-wrap {
position: absolute;
z-index: 1001;
width: 300px;
height: 100%;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
-webkit-transform: translate3d(-320px,0,0);
transform: translate3d(-320px,0,0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
/* Shown menu */
.show-menu .menu-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
-webkit-transition: -webkit-transform 0.8s;
transition: transform 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
position:fixed;
}
.show-menu .icon-list,
.show-menu .icon-list a {
}
.show-menu .icon-list a {
-webkit-transition-duration: 0.9s;
transition-duration: 0.9s;
}
.show-menu .content::before {
opacity: 1;
-webkit-transition: opacity 0.8s;
transition: opacity 0.8s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu-wrap">
<nav class="menu">
<ul class="navigation">
<li class="nav-item">
<a href="#">Hello!</a>
</li>
</ul>
</nav>
</div>
<div class="toggle toggle-x"></div>
<div class="site-wrap">
<div id="container">
<main id="content" role="main" class="scroll">
<div>
<h1 class="title"><a href="#">Welcome</a></h1>
</div>
</main>
</div>
</div>
答案 0 :(得分：2)
你有两个问题：
1）你必须学习如何在stackoverflow中提问：https://stackoverflow.com/help/asking
2）你有一个错误（在javascript控制台中抛出初始化！）
TypeError：openbtn.addEventListener不是函数
你需要控制for (Entry<String,String> entry : map.entrySet()) {
final String key = entry.getKey();
final String value = entry.getValue();
/* ... */
}
变量并使其成为一个DOM对象来操作它而没有问题
答案 1 :(得分：1)
确定你有错误
openbtn.addEventListener( 'click', toggleMenu );
您的openbtn是一个数组
document.getElementsByClassName( 'toggle-x' )
getElementsByClassName返回一个数组，数组没有这个方法。只有数组项。
你可以使用
if (openbtn.length > 0) { openbtn[0].addEventListener( 'click', toggleMenu ); }