Question

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

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

但是如果你将窗口大小调整到大于768px并然后返回覆盖层并且左侧仍然存在，我希望覆盖层隐藏，如果大于768px并且LeftSide不再具有Toggled类。

所以我现在尝试了一些我测试过的代码：

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

直到我再次将宽度改为768px以下，然后我看到leftside仍在那里。谁知道我怎么做到这一点？

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

<!-- 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

尝试编写RouteMatch之后 $(".Overlay").hide();声明。

如果您发布有关代码的更多信息。可能是我可以帮助更好。

当宽度大于时隐藏/显示div有麻烦

1 个答案: