我有两个按钮可以打开和关闭叠加div。
.trigger-overlay ,用于显示菜单和.overlay-close,与多个叠加层一起使用以关闭它们。
.wrap通过添加类 .wrap-open
包装所有内容并在打开叠加层时向右滑动单击 .trigger-overlay ,但单击 .overlay-close 时则不会。 See example。 (单击链接1或第二张幻灯片中的链接2)。
点击 .overlay-close 时,我需要对以下JS代码执行哪些操作才能删除 .wrap-open ? < / p>
JS小提琴: https://jsfiddle.net/cgx8zu2h/
工作示例: https://www.uk-cpi.com/temp-js/annual-review/
JavaScript
(function() {
var triggerBttn = document.getElementsByClassName('trigger-overlay');
var closeBttn = document.getElementsByClassName('overlay-close');
var wrap = document.querySelector('div.wrap');
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
support = {
transitions: Modernizr.csstransitions
};
function toggleOverlay() {
var overlay = document.getElementById(this.getAttribute('data-href'));
// If overlay is open
if (classie.has(overlay, 'zap')) {
classie.remove(overlay, 'zap');
classie.remove(wrap, 'wrap-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();
}
}
// If overlay isn't closed
else if (!classie.has(overlay, 'close')) {
classie.add(overlay, 'zap');
classie.add(wrap, 'wrap-open');
}
// If overlay is closed
else if (classie.has(overlay, 'close')) {
classie.add(overlay, 'zap');
classie.add(wrap, 'wrap-open');
}
}
for (var i = 0; i < triggerBttn.length; i++) {
triggerBttn[i].addEventListener('click', toggleOverlay);
}
//counts number of closeBttn and remove zap on click for all
for (var i = 0; i < closeBttn.length; i++) {
closeBttn[i].addEventListener('click', function() {
this.parentNode.className = this.parentNode.className.replace(/(?:^|\s)zap(?!\S)/g, '');
});
}
})();
答案 0 :(得分:1)
正如你所看到的 - 基本上我只是告诉 #menu 处于z-index:180 ..但我也删除了你对' classie '的使用, jquery已经有了。尽管你知道纯JS的方式来完成工作,但是如果你已经加载jquery为什么不利用它呢? https://jsfiddle.net/te0s2e86/1/
#menu{ z-index: 180; }