当宽度大于时隐藏/显示 div 有问题

Question

我对这段代码有一些问题：http://jsfiddle.net/w6f2gz2o/

当屏幕小于 768px 时，它会显示 navicon，如果您单击它，则会在孔屏幕上显示一个叠加层，并出现一个左侧。

但是，如果您将窗口大小调整为大于 768 像素，然后返回叠加层并且左侧仍然存在，我希望叠加层在大于 768 像素时隐藏，并且左侧不应再具有 Toggled 类。

所以我尝试了一些，现在我测试了这段代码：

$(window).resize(function() {
    if ($(window).width() > 768) { 
        if ($(".LeftSide").hasClass("Toggled")) { 
            $(".LeftSide").removeClass("Toggled");
            $(".Overlay").hide();
        }
    }
});

直到我再次将宽度更改为低于 768px，然后我看到左侧仍然存在。任何人都知道我该怎么做？

更新： 这里只是现在的布局，它就像我想要的那样工作，但现在按钮不起作用，所以我可以显示/隐藏侧边栏。

<!-- NAVBAR -->
        <nav class="navbar navbar-default no-margin navbar-static-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#toggleMenu" aria-expanded="false" id="menu-toggle">
                    <span class="fa fa-navicon"></span>
                </button>
                <div class="Logo"></span>
            </div>  
        </nav>

    <!-- CONTAINER -->
        <div class="container-fluid">
            <!-- COL MIDDLE -->
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 ">

                <!-- COL LEFT SIDE -->
                <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 hidden-xs">

                    <!-- PANEL -->
                    <div class="panel panel-default">
                        <div class="panel-body">
                        ELO
                        </div>
                    </div>
                </div>

                <!-- COL MIDDLE -->
                <div class="col-lg-8 col-md-6 col-sm-6 col-xs-12">
                    <div class="panel panel-default PanelMenu">
                        <div class="panel-body">
                        <a href="#" class="btn btn-xs btn-warning">Newest</a>
                        <a href="#" class="btn btn-xs btn-warning">Week</a>
                        <a href="#" class="btn btn-xs btn-warning">Month</a>
                        <a href="#" class="btn btn-xs btn-warning">Most Clicked</a>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-body">
                        ELO
                        </div>
                    </div>
                </div>

                <!-- COL RIGHT SIDE -->
                <div class="col-lg-2 col-md-3 hidden-sm hidden-xs">
                    <div class="panel panel-default">
                        <div class="panel-body">
                        ELO
                        </div>
                    </div>
                </div>

            </div>


        </div>

Answer 1

尝试在之后写$(".Overlay").hide(); if ($(".LeftSide").hasClass("Toggled")) 声明。

如果您发布更多关于代码的信息。也许我可以提供更好的帮助。