如何根据按钮按下和屏幕尺寸显示/隐藏侧边栏？

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');
});

}