Javascript 类切换[jQuery/CSS]

我已经建立了一个简单的

flexbox

布局，我试图让我的导航在570px或更低的时候切换，只需在其中有一个显示“导航”的按钮

当那个按钮被点击时，它应该切换隐藏的类，但是，它不想这样做，我很困惑

从我的代码中可以看到，我正在

$（window）.width（）

上运行一个条件语句，以查看它是否为ul.unstyled-list>a>li'）.addClass（“hidden”）； $（'nav.nav-container>.nav img'）.addClass（“隐藏”）； $（'.open btn'）。在（'click'，function（）上{ $（'nav.nav-container>ul.unstyled-list>a>li.nav-item'）.toggleClass（“隐藏”）； }); }否则{ if（$（'nav.nav-container>ul.unstyled-list>a>li'）.hasClass（'hidden'））{ $（'nav.nav-container>ul.unstyled-list>a>li'）.removeClass（'hidden'）； } if（$（'nav.nav-container>.nav img'）.hasClass（“隐藏”））{ $（'nav.nav-container>.nav img'）.removeClass（“隐藏”）； } } }))

哦，如果你想同时看到HTML、CSS和jQuery，还有一个到我的代码笔的链接

提前感谢您的回复

---

SD

在与shans的答案混合的过程中，与之前的代码相比，有一些东西发生了变化。一旦我解决了shans答案中的问题，我就开始使用$（window.resize（function（）{}）；再加上变量范围的变化，现在一切看起来都正常了

$(window).resize(function() {
    var nav_li = $('nav.nav-container > ul.unstyled-list > a > li');
    var width = window.innerWidth || document.body.clientWidth;
                if (width <= 570) {
                            nav_li.hide();
                            $('.nav-img').hide();
                            $('.open-btn').on('click', function() {
                                        nav_li.toggle();
                            });
                }

                if (width > 570) {
                            $('.nav-img').show();
                            nav_li.show();
                }
    });

$（窗口）。调整大小（函数（）{
var nav_li=$（'nav.nav-container>ul.unstyled-list>a>li'）；
var width=window.innerWidth | | document.body.clientWidth；
如果（宽度570）{
$（'.nav img'）.show（）；
nav_li.show（）；
}
});

您可以在my codepen中看到完整的布局和代码更改：

您应该将其放入$（window）.resize（function（）{…}）；在窗口大小更改时调用。但是你为什么不用媒体查询和css来隐藏li呢？使用JS有什么特别的原因吗？

$(document).ready(function() {
        if ($(window).width() <= 570) {
                    $('nav.nav-container > ul.unstyled-list > a > li').addClass("hidden");
                    $('nav.nav-container > .nav-img').addClass("hidden");
                    $('.open-btn').on('click', function() {
                                $('nav.nav-container > ul.unstyled-list > a > li.nav-item').toggleClass("hidden");
                    });
        } else {
                    if ($('nav.nav-container > ul.unstyled-list > a > li').hasClass('hidden')) {
                                $('nav.nav-container > ul.unstyled-list > a > li').removeClass('hidden');
                    }

                    if ($('nav.nav-container > .nav-img').hasClass("hidden")) {
                                $('nav.nav-container > .nav-img').removeClass("hidden");
                    }
        }

$(window).resize(function() {
    var nav_li = $('nav.nav-container > ul.unstyled-list > a > li');
    var width = window.innerWidth || document.body.clientWidth;
                if (width <= 570) {
                            nav_li.hide();
                            $('.nav-img').hide();
                            $('.open-btn').on('click', function() {
                                        nav_li.toggle();
                            });
                }

                if (width > 570) {
                            $('.nav-img').show();
                            nav_li.show();
                }
    });