我（目前）有三个按钮
<p><button class="trigger-overlay" type="button">Open Overlay 1</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay 2</button></p>
<p><button class="trigger-overlay" type="button">Open Overlay 3</button></p>
使用这些按钮，我想显示不同的菜单/覆盖。覆盖图如下所示：
<!-- Menu1 -->
<div class="overlay overlay-hugeinc">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a class="menuitem1">Menu1</a></li>
<li><a class="menuitem2">Item2</a></li>
</ul>
</nav>
</div>
<!-- Menu2 -->
<div class="overlay overlay-hugeinc">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a class="menuitem1">Menu2</a></li>
<li><a class="menuitem2">Item1</a></li>
</ul>
</nav>
</div>
<!-- Menu3 -->
<div class="overlay overlay-hugeinc">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a class="menuitem1">Menu3</a></li>
<li><a class="menuitem2">Item1</a></li>
</ul>
</nav>
</div>
这方面的JS是：
(function() {
var triggerButtons = document.getElementsByClassName( 'trigger-overlay' ),
overlay = document.querySelector( 'div.overlay' ),
closeBttn = overlay.querySelector( 'button.overlay-close' );
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
support = { transitions : Modernizr.csstransitions };
function toggleOverlay() {
if( classie.has( overlay, 'open' ) ) {
classie.remove( overlay, 'open' );
classie.add( overlay, 'close' );
var onEndTransitionFn = function( ev ) {
if( support.transitions ) {
if( ev.propertyName !== 'visibility' ) return;
this.removeEventListener( transEndEventName, onEndTransitionFn );
}
classie.remove( overlay, 'close' );
};
if( support.transitions ) {
overlay.addEventListener( transEndEventName, onEndTransitionFn );
}
else {
onEndTransitionFn();
}
}
else if( !classie.has( overlay, 'close' ) ) {
classie.add( overlay, 'open' );
}
}
for (var i = 0; i < triggerButtons.length; i++) {
triggerButtons[i].addEventListener( 'click', toggleOverlay );
}
closeBttn.addEventListener( 'click', toggleOverlay );
})();
我的问题是只有菜单1正在显示。脚本可以正常工作，但是menu2和menu3没有显示。
我想这一定是函数toggleoverlay缺少的东西。也许是a$(this)什么的（对不起我的JS已经不是以前的样子了）。我在triggerbuttons中循环，然后从google chrome dev中点击了“Right”按钮（我想，很难说出来）。
预期结果：如果我按下按钮3，菜单3显示。如果我按下按钮2，我会看到菜单2，依此类推。
此代码将解决您的问题。我添加了红色和蓝色的css类，分别用于关闭和打开，以使其可见。
null
(function() {
var triggerButtons = document.getElementsByClassName('trigger-overlay'),
overlay = document.querySelectorAll('div.overlay');
var closeButtons = [];
for (var i = 0; i < overlay.length; i++) {
var closeBttn = overlay[i].querySelector('button.overlay-close');
closeButtons.push(closeBttn);
}
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
support = {
transitions: Modernizr.csstransitions
};
function toggleOverlay(overlay) {
if (classie.has(overlay, 'open')) {
classie.remove(overlay, 'open');
classie.add(overlay, 'close');
var onEndTransitionFn = function(ev) {
if (support.transitions) {
if (ev.propertyName !== 'visibility') return;
this.removeEventListener(transEndEventName, onEndTransitionFn);
}
classie.remove(overlay, 'close');
};
if (support.transitions) {
overlay.addEventListener(transEndEventName, onEndTransitionFn);
} else {
onEndTransitionFn();
}
} else {
classie.add(overlay, 'open');
classie.remove(overlay, 'close');
}
}
for (var i = 0; i < triggerButtons.length; i++) {
triggerButtons[i].addEventListener('click', (function(i) {
return function() {
toggleOverlay(overlay[i])
};
})(i));
}
for (var i = 0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', (function(i) {
return function() {
toggleOverlay(overlay[i])
};
})(i));
}
})();.overlay.close {
background-color: red;
}
.overlay.open {
background-color: blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/classie/1.0.1/classie.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<p>
<button class="trigger-overlay" type="button">Open Overlay 1</button>
</p>
<p>
<button class="trigger-overlay" type="button">Open Overlay 2</button>
</p>
<p>
<button class="trigger-overlay" type="button">Open Overlay 3</button>
</p>
<!-- Menu1 -->
<div class="overlay overlay-hugeinc close">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a class="menuitem1">Menu1</a>
</li>
<li><a class="menuitem2">Item2</a>
</li>
</ul>
</nav>
</div>
<!-- Menu2 -->
<div class="overlay overlay-hugeinc close">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a class="menuitem1">Menu2</a>
</li>
<li><a class="menuitem2">Item1</a>
</li>
</ul>
</nav>
</div>
<!-- Menu3 -->
<div class="overlay overlay-hugeinc close">
<button type="button" class="overlay-close">Close</button>
<nav>
<ul>
<li><a class="menuitem1">Menu3</a>
</li>
<li><a class="menuitem2">Item1</a>
</li>
</ul>
</nav>
</div>
只是您可以为div使用不同的id并使用该id执行操作
