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'); }) }); 


})();

来源

2016-11-30 Dan Lee

-1

.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>

来源

2016-11-30 10:23:33 Purushothaman

Javascript（覆盖菜单）关闭转换

回答

相关问题