javascript - 类切换 [jQuery/CSS]

Question

我构建了一个简单的 flexbox 布局，我试图让我的导航在 570px 或更小时切换，只有一个按钮显示“导航”。

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

正如您从我的代码中看到的那样，我在 $(window).width() 上运行条件语句以查看它是否为 <= 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 样式加上用于更改 flex-direction 等的媒体查询，还显示用于导航切换的按钮。

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，还有我的代码笔的链接!

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

提前感谢您的任何回复。

标准差

Answer 1

与之前的代码以及与 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();
                }
    });

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