Javascript(覆盖菜单)关闭转换
问题描述:
在我的网站中,我有两个不同转换的叠加层数。一个用于顶部淡入淡出的菜单叠加层,另一个用于页面叠加层,用于水平推送主要内容。Javascript(覆盖菜单)关闭转换
当用户点击菜单汉堡按钮时,叠加打开。目前单击菜单选项链接会创建一个转换,该转换只能在用户打开页面叠加时应用。当类.wrap-open添加到.wrap水平推送主内容时,会发生转换。这会产生消隐屏幕白色的不利影响,但真正的.wrap-open应该从.wrap中删除。
JS小提琴 https://jsfiddle.net/te0s2e86/4/
点击链接1和2链接的伟大工程,但点击一旦打开一个菜单链接杀死了经验。
我的问题:我该如何解决这个问题,以便保留页面覆盖的过渡效果,但在菜单通过单击菜单选项关闭时将其删除?
JS代码:
(function() {
var triggerBtn = $('.trigger-overlay'),
closeBtn = $('.overlay-close'),
wrap = $('.wrap'),
closeMenu = $('.menu-close'),
transEndEventNames = {
'WebkitTransition': 'webkitTransitionEnd',
'MozTransition': 'transitionend',
'OTransition': 'oTransitionEnd',
'msTransition': 'MSTransitionEnd',
'transition': 'transitionend'
},
transEndEventName = transEndEventNames[Modernizr.prefixed('transition')],
support = { transitions: Modernizr.csstransitions
};
function toggleOverlay() {
var data_href = $(this).attr('data-href'), is_menu = (data_href == "menu"), overlay = $('#'+ data_href);
if(!is_menu) $('.wrap-open,.close,.zap').removeClass('wrap-open').removeClass('close').removeClass('zap');
// If overlay is open
if (overlay.hasClass('zap')) {
overlay.removeClass('zap').addClass('close');
wrap.removeClass('wrap-open');
var onEndTransitionFn = function(ev) {
if (support.transitions) {
if (ev.propertyName !== 'visibility') return;
this.removeEventListener(transEndEventName, onEndTransitionFn);
}
overlay.removeClass('close');
};
if (support.transitions) {
overlay.get(0).addEventListener(transEndEventName, onEndTransitionFn);
} else {
onEndTransitionFn();
}
}
// If overlay isn't closed
else if (!overlay.hasClass('close')) {
if(!is_menu){wrap.addClass('wrap-open');}
overlay.addClass('zap');
}
// If overlay is closed
else if (overlay.hasClass('close')) {
if(!is_menu){wrap.addClass('wrap-open');}
overlay.addClass('zap');
}
}
triggerBtn.each(function(idx){ $(this).click(toggleOverlay); });
closeMenu.each(function(idx){ $(this).click(toggleOverlay); });
closeBtn.each(function(idx){ $(this).click(function(evt){ $(this.parentNode).removeClass('zap'); $('.wrap').removeClass('wrap-open'); }) });
})();
答
.overlay {
position: fixed;
top: 0;
left: 0;
height: 0;
width: 100%;
background-color: grey;
overflow: auto;
z-index: 99;
text-align: center;
padding-top: 0;
transition: height 0.5s;
}
.overlayshow {
height: 100%;
padding-top: 100px;
transition: height 0.5s, padding-top 0.5s;
}
button {
position: relative;
z-index: 100;
}
document.querySelector('button').addEventListener('click', function (e) {
document.querySelector('.overlay').classList.toggle('overlayshow');
})
<nav>
<button class="hamburger hamburger--squeeze" type="button">
<span class="hamburger-box">
<span class="hamburger-inner">button</span>
</span>
</button>
<div class="overlay">
menu list goes hee
</div>
</nav>