Question

我有一个移动下拉菜单，当窗口调整大小或拖动到更大或更小的尺寸时，它不会保持关闭状态。是否可以仅在单击菜单时打开菜单折叠菜单？

加载页面时折叠菜单，但是，一旦拖动窗口调整其大小，菜单就会自行打开。

感谢您的帮助！

-------＆GT;

<script>
        $(function() {
            var pull        = $('button.open-menu');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(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');
                }
            });
        });
</script>
HTML

<!----------------------------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------------------------------->
CSS

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

Answer 1

我从上面的评论中获得了建议，并删除了一行代码

<script>
        $(function() {
            var pull        = $('button.open-menu');
                menu        = $('nav ul');
                menuHeight  = menu.height();

            $(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');         <<<-----I REMOVED THIS LINE-----
                }
            });
        });
</script>

在窗口调整大小时，可折叠菜单不会保持关闭状态

1 个答案: