如何根据按钮的按下和屏幕大小显示/隐藏侧栏？

Question

我为面板构建了一个自定义的导航侧栏。在此边栏中，我没有几个菜单选项。当我的屏幕尺寸小时，我希望所有菜单选项都消失，并且只显示一个特定的菜单项。此特定于菜单的选项就像一个按钮一样使用，可以使所有菜单再次出现。

菜单：

当我的屏幕很小时，它看起来像这样：

对于侧边栏菜单，我使用以下代码：

<div class="card-body">

<a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"><i class="fa fa-bars" aria-hidden="true"></i> Open/Close menu</a>

<div id="menulinks" class="nav nav-pills" >
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-line-chart" aria-hidden="true"></i> Projects</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-suitcase" aria-hidden="true"></i> Jobs</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>

</div>

要使菜单选项显示/消失，请使用以下CSS逻辑框：

@media screen and (min-width: 992px) {

#shmenulinks {
display: none;
}
#menulinks {
display: block;
}
}

@media screen and (max-width: 991px) {
#shmenulinks {
display: block;
}
#menulinks {
display: none;
}

}

我的问题是，当我的屏幕很小并且菜单折叠时，可用于使菜单选项显示/消失的按钮不起作用。

CODEPEN： https://codepen.io/neyelson-alves/pen/ZEGbdJB

我该怎么办？

Answer 1

请添加jquery。

$("#shmenulinks").click(function(){ $("#menulinks").slideToggle();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

有些类可用于所有断点的显示属性。如果只想在中型设备中隐藏某些菜单，请使用** d-lg-block d-md-none d-sm-block ** 您希望在大中型设备上显示所有菜单，希望在移动设备上可以使用class =“ ** d-lg-block d-md-block d-none d-sm-none **” 我已经将它类似地分配给div，您只将要隐藏的元素的类提供给小屏幕（移动设备）或中型设备（平板电脑）

<div class="col-sm-4 d-lg-block d-md-block d-none d-sm-none ">
  <h3>Column 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>

在按钮上单击以调用函数并执行此操作

function onBtnClick(){
var element = document.getElementById("Menu1");
element.classList.add("d-lg-block d-md-block d-none d-sm-none");
}

Answer 3

请更新您的媒体查询

@media screen and (max-width: 991px) {

#shmenulinks {
  display: block;
}
.nav-link-collapse.not(this).removeClass('nav-link-show');
$(this).toggleClass('nav-link-show');
});

}