Javascript 如何同时使用多个引导4显示类切换内容显示

我正在努力寻找一种干净的方法，在使用Bootstrap4的几个显示类时，单击切换侧导航栏的显示，因为它们使用了！重要的

例如，这里有一个示例div，它使用我想要打开显示的显示类

<div class="module-name d-none d-lg-block sb-collapsable">
     {{module_name}}
</div>>

{{module_name}}
>

也许我现在真的很忙，但是我找不到一个干净的方法来切换这个显示，因为d-none和d-lg-block类都使用display:none/block！重要的。sb collapsable类作为一个助手，可以在jQuery中查找我想要隐藏的所有内容。我真的很感激任何帮助。我尝试了很多不同的东西，到处寻找类似的问题，但没有找到任何结果

编辑：我应该补充一点，不是每个使用sb collapsable类的div都有相同的类。这里是另一个例子。理想情况下，在JS执行之前，我需要切换这个div和另一个div的可见性，而不知道显示的状态

<a class="d-block d-lg-none brand bg-dark sb-collapsable" href="#">XXX</a>

---

我偶然发现了同样的问题，并为其编写了一个简单的解决方案，名为

bs4_display.js

（关于此问题的完整代码）。当隐藏元素时，它将任何

d-*-block

类交换为类似

dummy-*-block

的伪类。如果之后选择显示该元素，则它会执行相反的操作，恢复原始类。完整的工作示例。API是：

bs4Display.show([HTMLelement]);
bs4Display.hide([HTMLelement]);
bs4Display.reset([HTMLelement]);

（功能（窗口）{
"严格使用",；
//包装纸
函数bs4Display（）{
var_bs4Display={}；
_bs4Display.DUMMY_前缀='DUMMY'
//私有方法
_BS4显示。\构建\块\类=函数（）{
如果（显示块）{
返回显示块；
}
变量前缀=_bs4Display.DUMMY_前缀；
_BS4显示。\u块阵列=[
['d-block'，前缀+'-block']，
['d-sm-block'，前缀+'-sm-block']，
['d-md-block'，前缀+'-md-block']，
['d-lg-block'，前缀+'-lg block']，
['d-xl-block'，前缀+'-xl block']
];
_BS4显示。\u数组=[
[前缀+'-none'，d-none']，
[前缀+'-sm-none'，d-sm-none']，
[前缀+'-md-none'，d-md-none']，
[前缀+'-lg-none'，d-lg-none']，
[前缀+'-xl-none'，d-xl-none']
];
_bs4Display.\u displayBlocks=\u bs4Display.\u blockArray.concat（\u bs4Display.\u noneArray）；
返回显示块；
}
if（typeof（document.querySelector（'body'）.classList.replace）！='undefined'）{
//本机替换
_bs4Display.\u replace=函数（el、旧类、新类）{
返回el.classList.replace（旧类、新类）；
}
}否则{
//polyfill，由于支撑性不好：
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
_bs4Display.\u replace=函数（el、旧类、新类）{
if（el.classList.contains（oldClass））{
el.classList.remove（旧类）；
el.classList.add（newClass）；
}
}
}
//公共方法
/**
*隐藏带有引导4标记的HTML元素
*@param{Element |[Element]}els-要隐藏的HTML元素。
*/
_bs4Display.hide=函数（els）{
如果（！els）{return；}//没有要隐藏的内容
如果（！（els数组实例））{els=[els]；}
var dBlocks=_bs4Display._build_block_classes（）；
对于（var k=0；k

引导4显示/隐藏

显示d-none
隐藏d-无
复位d-无


显示d块
隐藏d-块
复位d块

无
d-块

不要使用

d-none

和

d-lg-block

。使用

myOwn-d-none

和

myOwn-d-lg-block

。自Bootstrap决定使用

以来！重要信息

为了强制在元素上显示，上面的两个类（以及类似的）已成为标准的引导v4类。