css - 使用 d-none d-lg-block 时 Bootstrap 无法切换

Question

我创建了一个只在大屏幕上显示的导航栏

<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 时没有任何效果>

我该如何解决这个问题？

Answer 1

我意识到如果 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();
    }  
});

我希望这对遇到同样事情的任何人都有用