Jquery 如何在单击事件之前隐藏菜单中的项目？

我有一个下拉菜单，我想知道我如何保持列表项折叠，直到单击导航按钮？我试过滑下/滑下，但没能成功

如有进一步了解，将不胜感激

谢谢

------->

试试这个

此外，您还犯了一些逗号+分号错误

    var pull = $('button.open-menu');
    menu = $('nav ul');
    menuHeight = menu.height();

应写为（如果不是，菜单和菜单高度将是全局变量）

<!----------------------------MOBILE NAVIGATION MENU----------------------------------->
<div class="mobile-nav-container">
<button class="open-menu"><img src="images/menu-button.svg"></button>
<nav class="nav-menu">
<ul class="nav-menu">
<li class="mb-nav"><a href="current-journal.html">CURRENT JOURNAL</a></li>
<li class="mb-nav"><a href="subscribe.html">SUBSCRIBE</a></li>
<li class="mb-nav"><a href="submit.html">SUBMIT MATERIAL</a></li>
<li class="mb-nav"><a href="submission-guidelines.html">SUBMISSION GUIDELINES</a></li>
<li class="mb-nav"><a href="http://3elementsreview.blogspot.com">3E BLOG</a></li>
<li class="mb-nav"><a href="past-journals.html">PAST JOURNALS</a></li>
<li class="mb-nav"><a href="about-3elements.html">ABOUT 3ELEMENTS</a></li>
<li class="mb-nav"><a href="the-editors.html">THE EDITORS</a></li>
<li class="mb-nav"><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
</div><!----------------------MOBILE NAV CONTAINER  END------------------------------->

.mobile-nav-container {
    position:relative;
    background-color:#252525;
    top:-5px;
    width:100%;
    height:40px;
    border-bottom:5px solid #ffd09d;
    z-index:300;
    display:inline-block;
}

ul.nav-menu {/*navigation menu as a whole*/
    position:relative;
    top:13px;
    margin:0px;
    padding:0px;
    background-color:#252525;
    width:100%;
    border-bottom: 2px solid #ff6000;
}

nav ul li a {/*navigation list items*/
    position:relative;
    top:0px;
    padding-left:5%;
    padding-right:5%;
    padding-top:3px;
    line-height:1.9em;
    border-bottom: 1px solid #313131;
    width:90%;
    height:30px;
    display:inline-block;
    font-family:myriad pro;
    font-size:1em;
    list-style:none;
    transition:300ms;
    -webkit-transition:300ms;
}

nav ul li {/*drop down list padding settings*/
    list-style:none;
}

nav li a {/*main navigation text color and padding settings*/
    position:relative;
    top:0px;
    margin:0px;
    padding:0px;
    color:#ffd09d;
    text-decoration:none;
}

.nav-menu li:active a {/*main navigation TEXT HOVER effects*/
    color:#ff6000;
    background-color:#beb29a;
    transition:400ms;
    -webkit-transition:400ms;
}

.nav-menu li:hover a {/*main navigation TEXT HOVER effects*/
    color:#ff6000;
    transition:300ms;
    -webkit-transition:300ms;
}

button.open-menu {
    position:relative;
    top:5px;
    left:5%;
    margin:0px;
    padding:0px;
    width:40px;
    height:29px;
    display:inline-block;
    outline:none;
    background-color:#353535;
    border:2px solid #424242;
    box-shadow:0px 0px 2px #000;
    cursor:pointer;
}

button.open-menu:active {
    cursor:pointer;
    border:2px solid #353535;
    box-shadow:none;
}

    $(function () {
        var pull = $('button.open-menu');
        menu = $('nav ul');
        menuHeight = menu.height();
        menu.slideToggle(0);
        $(pull).on('click', function (e) {
            e.preventDefault();
            menu.slideToggle();
        });

        $(window).resize(function () {
            var w = $(window).width();
            if (w > 320 && menu.is(':hidden')) {
                menu.removeAttr('style');
            }
        });
    });

    var pull = $('button.open-menu');
    menu = $('nav ul');
    menuHeight = menu.height();

    var pull = $('button.open-menu'),
    menu = $('nav ul'),
    menuHeight = menu.height(),