Css 使用d-none d-lg-block时引导无法切换

我创建了一个导航栏，它只会出现在大屏幕上

<nav id="sidebar" class="d-none d-lg-block">
...
</nav>

...

我还创建了一个切换程序，可以在单击时显示/隐藏导航栏

<a href="#" onclick="$('#sidebar').toggle();"><i class="fa fa-bars custom-icon"></i></a>

问题是，当我单击图标时，导航栏不会隐藏并且

显示：无d-none d-lg-block

---

如何解决此问题？

d-none

将显示设置为

display:none！重要信息

意味着它只能被同样是

的其他css覆盖！重要信息

你可以试试这个，虽然不是很漂亮：

功能切换（$elmnt）{
如果（$elmnt.css（'display'）='none'）{
$elmnt.css（{'cssText'：'display:block！important；'}）；
}否则{
$elmnt.css（{'cssText'：'display:none！important；'}）；
}  
}

这里是导航栏

您可以按照确切的结构使用BS4制作导航栏吗

纯BS4导航栏如下所示

引导示例

我意识到，如果显示为无，并且我们添加了

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

---

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

寻求代码帮助的问题必须包含在问题本身中重现代码所需的最短代码，最好是以最短的代码。请参阅@Amine Messaoudi请添加适当的代码段以更好地理解。

切换

添加

显示：无

内联…正确。它不会禁用

d-none

类。请尝试

toggleClass（“d-none”）

。@Paulie\u d我尝试过，但不起作用。然后你需要在堆栈片段中最少演示这个问题。他正在使用BS4，所以这个自定义代码只是浪费时间。他的问题是如何切换整个导航栏以显示或隐藏它，答案提供了。但是使用BS4类，导航栏扩展xl、导航栏扩展lg、导航栏扩展md、导航栏扩展sm。他可以分别为宽度1199px、991px、767px和575px进行切换。因此，只要指导他以正确的方式使用BS4类即可。问题在于

d-lg-block

，因为它覆盖了display none。关键是在调用

$（“#侧边栏”）之前删除它。toggle（）

@KuldipKoradia这些类不会隐藏整个导航栏。这正是他试图做的。这是错误的方法，dude请参考BS4官方网站或W3School上的BS4导航栏示例。