我创建了一个只在大屏幕上显示的导航栏
<nav id="sidebar" class="d-none d-lg-block">
...
</nav>
我还创建了一个切换器,可以在点击时显示/隐藏导航栏
<a href="#" onclick="$('#sidebar').toggle();"><i class="fa fa-bars custom-icon"></i></a>
问题是,当我单击图标时,导航栏不会隐藏,并且 display: none;
在使用 d-none d-lg-block
时没有任何效果>
我该如何解决这个问题?
最佳答案
我意识到如果 display 是 none 并且我们添加 d-lg-block
那么它会再次出现导航栏,这是主要问题,因为我无法在该类时隐藏导航栏仍然存在。所以我创建了一个函数,在隐藏之前先删除它
$("#toggler").click(function()
{
if($("#sidebar").css('display') === 'none')
{
$("#sidebar").addClass("d-none");
$("#sidebar").addClass("d-lg-block");
$("#sidebar").toggle();
}
else
{
$("#sidebar").removeClass("d-none");
$("#sidebar").removeClass("d-lg-block");
$("#sidebar").toggle();
}
});
我希望这对遇到同样事情的任何人都有用
关于css - 使用 d-none d-lg-block 时 Bootstrap 无法切换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59788077/