javascript - 如何让子菜单先离开，然后填充body？

Question

如何确保在单击“Menu with sub”项时，子菜单先熄灭，然后填充出现在正文中？当你一开始隐藏所有子菜单，然后你已经失去了填充体？现在那里有一个白色的间隙...................................... ..................................................... .........................................

我的完整菜单在这里：菜单作为 CodePen

Javascript：

$(function() {
var menuWrap = $('.js-nav');
var rootMenu = menuWrap.children('.js-menu');
var currentMenu = rootMenu;

function setMenu(menu) {
    var level = menu.parents('.js-menu').length;

    menu.show();
    menuWrap.css('height', menu.outerHeight());
    rootMenu.css('left', -100 * level + '%');
    currentMenu = menu;

    if (rootMenu.css('transitionDuration') !== '0s') {
        rootMenu.one('transitionend', function(){
            menu.find('.js-menu').show();
        });
    } else {
        menu.find('.js-menu').show();
    }
}

var linkOfSubMenu = $('.js-link-sub');

function clickToLink(e) {
    e.preventDefault();
    var findMenu = $(this).parent().siblings('.js-menu');
    setMenu(findMenu);
}

var hamburgerIcon = $('.js-hamburger');
var mnuWrap = $('.js-nav');

function huburgIcon(e) {
    e.preventDefault();
    $(this).toggleClass('m-hamburger-active');
    mnuWrap.toggleClass('m-nav-opened');
    mnuWrap.removeAttr('style');

    var previousMenu = currentMenu.parent('li').parent('.js-menu');
    setMenu(previousMenu);
}

var subHeight = $('.js-menu-drop').outerHeight();

function subMenuDesktop(e) {
  e.preventDefault();
  var sub = $(this).parent().next(); 
  sub.slideDown(600);
  $('body').css({
    paddingTop: subHeight
  })
}

var hideBtn = $('.js-hide'); 

function hideButton(e) {
    e.preventDefault();
    $('body').css({
        paddingTop: 0
    });
    $(this).parent().parent().parent().slideUp(600);
}




var mediaQueryXS = window.matchMedia('(max-width: 991px)');

function onResize(mediaQueryXS) {
    if (mediaQueryXS.matches) {
        hamburgerIcon.on('click', huburgIcon);
        linkOfSubMenu.on('click', clickToLink);

        linkOfSubMenu.off('click', subMenuDesktop);

        $('body').removeAttr('style');

        hideBtn.off('click', hideButton);

    } else {
        hamburgerIcon.off('click', huburgIcon);
        linkOfSubMenu.off('click', clickToLink);

        linkOfSubMenu.on('click', subMenuDesktop);

        hideBtn.on('click', hideButton);
    }
}

onResize(mediaQueryXS);
mediaQueryXS.addListener(onResize); 
})

HTML：

<div class="head">
    <div class="head-top js-head">

        <a href="#" class="hamburger js-hamburger">Open me</a>

        <nav class="nav js-nav">
            <ul class="menu js-menu">
                <li> 
                    <h4><a href="">Lomrem 1</a></h4>
                </li>
                <li> 
                    <h4><a href="">Lomrem 2</a></h4>
                </li>
                <li>
                    <h4><a class="js-link-sub" href="#">Menu with sub</a></h4>
                    <ul class="menu menu_dropdown js-menu js-menu-drop">
                        <li class="subMenu-items">
                            <ul class="subMenu-list">
                                <li class="subMenu-box">
                                    <ul class="subMenu-item">
                                        <li>
                                            <h4><a href="#" >Lorem 3.1</a></h4>
                                            <ul class="subMenu-points">
                                                <li><a href="#">Lorem ipsum dolor</a></li>
                                                <li><a href="#">Lorem ipsum dolor sit amet, consectetur</a></li>
                                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li class="subMenu-box">
                                    <ul class="subMenu-item">
                                        <li>
                                            <h4><a href="#" >Lorem 3.2</a></h4>
                                            <ul class="subMenu-points">
                                                <li><a href="#">Lorem ipsum dolor</a></li>
                                                <li><a href="#">Lorem ipsum dolor sit amet, consectetur</a></li>
                                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                                <li class="subMenu-box">
                                    <ul class="subMenu-item">
                                        <li>
                                            <h4><a href="#" >Lorem 3.3</a></h4>
                                            <ul class="subMenu-points">
                                                <li><a href="#">Lorem ipsum dolor</a></li>
                                                <li><a href="#">Lorem ipsum dolor sit amet, consectetur</a></li>
                                                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>

                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li class="hide js-hide">
                                    Hide
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>

    </div>
</div>

标签： javascriptjquerymenu