这段代码有一些问题:http://jsfiddle.net/w6f2gz2o/
当屏幕小于 768px 时,它会显示导航图标,如果您单击它,则会在孔屏幕上显示叠加层,并出现左侧。
但是,如果您将窗口大小调整为大于 768px,然后返回覆盖层,并且左侧仍然存在,我希望覆盖层在大于 768px 时隐藏,并且 LeftSide 不应再具有 Toggled 类。
所以我已经尝试了一些,现在我测试了这段代码:
$(window).resize(function() {
if ($(window).width() > 768) {
if ($(".LeftSide").hasClass("Toggled")) {
$(".LeftSide").removeClass("Toggled");
$(".Overlay").hide();
}
}
});
它一直有效,直到我再次将宽度更改为 768 像素以下,然后我看到左侧仍然存在。任何人都知道我该怎么做?
更新: 这只是现在的布局,它像我想要的那样工作,但现在按钮不起作用,所以我可以显示/隐藏侧边栏。
<!-- 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>
最佳答案
尝试在之后编写 $(".Overlay").hide();
if ($(".LeftSide").hasClass("Toggled"))
语句。
如果您发布更多有关代码的内容。也许我可以提供更好的帮助。
关于jquery - 当宽度大于时隐藏/显示 div 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33301858/