Question

我有一个站点，当单击/切换按钮时，其导航会展开（＃nav-icon）；单击“打开”，然后单击“关闭”等。#main包含网站内容，#mytopnav是导航。通过添加将其“压下” 点击top-margin:85vh和height。

js

$(document).ready(function () {
    // Animate Toggle button
    $('#nav-icon').click(function () {
        $(this).toggleClass('open');
        $('#main').toggleClass('openMargin');
        $('#myTopnav').toggleClass('openHeight');
    });
});

css

#nav-icon { position: absolute; ...
#nav-icon.open { top: 80vh; }

@media screen and (max-width: 768px) { 

.openHeight { height: 80vh; }
.openMargin { margin-top: 80vh; }

}

html

<button id="nav-icon" class="navbar-toggler" type="button" onclick="toggleNav()">
    <div id="icon-wrap">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</button>

我的问题是调整屏幕大小时，菜单保持打开状态（单击按钮时应用的所有样式都保持打开状态。

基本上，我希望在调整屏幕大小时将其“重置”。本质上等效，就像他们在调整屏幕大小之前再次单击按钮一样。

Answer 1

一个可行的示例将有助于理解问题并建议代码，但是我理解您想要从open中删除openMargin，openHeight和#nav-icon类的内容，#main和#myTopnav（如果调整了窗口的大小，并希望菜单在单击之前重置为默认位置。

您可以使用javascript检测窗口是否已调整大小，并通过在#nav-icon之前添加以下代码来从#main，#myTopnav和</body>元素中删除该类。标签

jQuery(function ($) {
    $(window).resize(function (event) {
        $("#nav-icon").removeClass("open");
        $("#main").removeClass("openMargin");
        $("#myTopNav").removeClass("openHeight");
    });
});

如果您想将上述功能限制为特定的宽度，只能说您不希望重置样式，除非调整大小窗口的宽度达到780px，那么您可以将内部代码包装在检查中

jQuery(function ($) {
    $(window).resize(function (event) {
        if ($(this).width()<=780) {
            ..///rest of the code
        }
    });
});

Answer 2

您可以添加事件侦听器，以等待调整大小事件以触发将关闭菜单的功能。

function closeOnResize( event ){
  // your logic here
}

window.addEventListener("resize", closeOnResize);

屏幕调整大小时重置切换（多种样式）

2 个答案: