类切换[jQuery / CSS]

Question

我已经构建了一个简单的flexbox布局，我试图让我的导航切换到 570px 或更少，只需要一个按钮“ Navigation < / em>“在里面。

当点击该按钮时，它应该从li中切换隐藏的类，但是，它不想这样做，我很困惑！

从我的代码中可以看出，我在$(window).width()上运行一个条件语句，看看是＆lt; = 570 然后为任何更大的大小运行else语句

任何人都可以解决这个问题，因为我出于某种原因无法理解。

这是我的CSS和jQuery。

CSS：

.hidden {
                display: none;
    }
    /*
    Nav Styles 
    */

    nav.nav-container {
                display: flex;
                width: 100vw;
                background: #333;
                justify-content: center;
                align-items: center;
                flex-wrap: wrap;
                padding: 20px;
    }

    nav.nav-container > .nav-img {
                justify-content: flex-start;
                margin: 0 5px;
    }

    nav.nav-container > ul.unstyled-list {
                list-style-type: none;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                flex-grow: 200;
                justify-content: flex-end;
                max-height: 2000px;
    }

    nav.nav-container > ul.unstyled-list > a {
                text-decoration: none;
    }

    nav.nav-container > ul.unstyled-list > a > li.nav-item {
                color: #ffffff;
                font-weight: bold;
                font-size: 20px;
                text-align: center;
                padding: 20px;
    }

    nav.nav-container > ul.unstyled-list > a > li.nav-item.active {
                background: #666;
                text-decoration: underline;
    }

    nav.nav-container > ul.unstyled-list > a > li.nav-item.active:hover {
                background: #999;
    }

    nav.nav-container > button.open-btn {
                border: 0;
                width: 100px;
                height: 40px;
                display: none;
                background: #000000;
                color: #ffffff;
                border: 1px solid #ffffff;
                outline: none;
    }
    /*
    Content Styles 
    */

    section.content {
                display: flex;
                flex-direction: row;
                font-size: 20px;
    }

    section.content > div.left {
                flex-grow: 1;
                margin: 10px;
    }

    section.content > div.right {
                flex-grow: 1;
                margin: 10px;
    }

    .section-title {
                text-align: center;
                font-size: 250%;
    }
    /*
    Basic Responsive Styles 
    */

    @media (max-width: 570px) {
                /*
        Nav Responsive Styles 
    */

                nav.nav-container {
                            padding: 0;
                }
                nav.nav-container > ul.unstyled-list {
                            flex-direction: column;
                            max-height: 2000px;
                }
                nav.nav-container > ul.unstyled-list > li{
                }
                nav.nav-container > button.open-btn {
                            display: block;
                            margin: 15px;
                            flex-grow: 1;
                }
                /*
        Content Responsive Styles 
    */

                section.content {
                            flex-direction: column;
                }
    }

正如您所看到的，它是基本的flexbox样式加上媒体查询以更改弹性方向等，并且还显示导航切换按钮。

jQuery的：

$(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");
                    }
        }

}）;

哦，如果你想同时看到HTML，CSS和jQuery，也可以链接到我的codepen！

http://codepen.io/skulldev/pen/RPyEQa

提前感谢您的回复。

SD

Answer 1

从之前的代码和与shans＆＃39;回答。一旦我解决了shans＆＃39;回答，我继续改为使用$（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();
                }
    });

您可以在我的codepen中看到完整的布局和代码更改：http://codepen.io/skulldev/pen/RPyEQa