gpt4 book ai didi

javascript - 如何同时使用多个 Bootstrap 4 显示类切换内容显示

转载 作者:搜寻专家 更新时间:2023-10-31 19:30:13 24 4
gpt4 key购买 nike

在使用 Bootstrap 4 的几个显示类时,我正在努力寻找一种干净的方法来单击切换侧面导航栏的显示,因为它们使用了 !important。

例如,这是一个使用显示类的示例 div,我想打开显示。

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

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

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

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

最佳答案

我偶然发现了同样的问题并为此编写了一个简单的解决方案,名为 bs4_display.js(完整代码在 gist 上)。当隐藏元素时,它会将任何 d-*-block 类替换为虚拟类,如 dummy-*-block。如果之后您选择显示该元素,它会执行相反的操作,恢复原始类。完整的工作示例位于 jsbin . API 是:

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

(function(window){
'use strict';

// wrapper
function bs4Display() {
var _bs4Display = {};

_bs4Display.DUMMY_PREFIX = 'dummy'

// private methods
_bs4Display._build_block_classes = function () {
if (_bs4Display._displayBlocks) {
return _bs4Display._displayBlocks;
}
var prefix = _bs4Display.DUMMY_PREFIX;
_bs4Display._blockArray = [
['d-block', prefix + '-block'],
['d-sm-block', prefix + '-sm-block'],
['d-md-block', prefix + '-md-block'],
['d-lg-block', prefix + '-lg-block'],
['d-xl-block', prefix + '-xl-block']
];
_bs4Display._noneArray = [
[prefix + '-none', 'd-none'],
[prefix + '-sm-none', 'd-sm-none'],
[prefix + '-md-none', 'd-md-none'],
[prefix + '-lg-none', 'd-lg-none'],
[prefix + '-xl-none', 'd-xl-none']
];
_bs4Display._displayBlocks = _bs4Display._blockArray.concat(_bs4Display._noneArray);
return _bs4Display._displayBlocks;
}

if (typeof(document.querySelector('body').classList.replace) !== 'undefined') {
// native replace
_bs4Display._replace = function (el, oldClass, newClass) {
return el.classList.replace(oldClass, newClass);
}
} else {
// polyfill, since support is not great:
// https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility
_bs4Display._replace = function (el, oldClass, newClass) {
if (el.classList.contains(oldClass)) {
el.classList.remove(oldClass);
el.classList.add(newClass);
}
}
}

// public methods
/**
* Hides a HTML element with BootStrap 4 markup
* @param {Element|[Element]} els - HTML element(s) to hide.
*/
_bs4Display.hide = function (els) {
if (!els) { return; } // nothing to hide
if (!(els instanceof Array)) { els = [els]; }
var dBlocks = _bs4Display._build_block_classes();
for (var k = 0; k < els.length; k++) {
for (var i = 0; i < dBlocks.length; i++) {
_bs4Display._replace(els[k], dBlocks[i][0], dBlocks[i][1]);
}
els[k].style.display = 'none';
}
}

/**
* Shows a HTML element with BootStrap 4 markup
* @param {Element|[Element]} els - HTML element(s) to show.
*/
_bs4Display.show = function (els) {
if (!els) { return; } // nothing to show
if (!(els instanceof Array)) { els = [els]; }
var dBlocks = _bs4Display._build_block_classes();
for (var k = 0; k < els.length; k++) {
for (var i = 0; i < dBlocks.length; i++) {
_bs4Display._replace(els[k], dBlocks[i][1], dBlocks[i][0]);
}
els[k].style.display = '';
}
}

/**
* Restores the HTML elements original display classes
* @param {Element|[Element]} els - HTML element(s) to reset.
*/
_bs4Display.reset = function (els) {
if (!els) { return; } // nothing to show
if (!(els instanceof Array)) { els = [els]; }
_bs4Display._build_block_classes();
for (var k = 0; k < els.length; k++) {
for (var i = 0; i < _bs4Display._blockArray.length; i++) {
_bs4Display._replace(els[k], _bs4Display._blockArray[i][1], _bs4Display._blockArray[i][0]);
_bs4Display._replace(els[k], _bs4Display._noneArray[i][0], _bs4Display._noneArray[i][1]);
}
els[k].style.display = '';
}
}

return _bs4Display;
}

if(typeof(window.bs4Display) === 'undefined') {
window.bs4Display = bs4Display();
}
})(window);

// optional, change prefix before first call
// window.bs4Display.DUMMY_PREFIX = 'bs4-display'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>BootStrap 4 Show/Hide</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<p>
<button onclick="bs4Display.show(document.getElementById('none'));" type="button" class="btn btn-primary">Show d-none</button>
<button onclick="bs4Display.hide(document.getElementById('none'));" type="button" class="btn btn-secondary">Hide d-none</button>
<button onclick="bs4Display.reset(document.getElementById('none'));" type="button" class="btn btn-info">Reset d-none</button>
</p>
<p>
<button onclick="bs4Display.show(document.getElementById('block'));" type="button" class="btn btn-success">Show d-block</button>
<button onclick="bs4Display.hide(document.getElementById('block'));" type="button" class="btn btn-danger">Hide d-block</button>
<button onclick="bs4Display.reset(document.getElementById('block'));" type="button" class="btn btn-info">Reset d-block</button>
</p>

<div class="container">
<div id="none" class="d-none p-2 bg-primary text-white">d-none</div>
<div id="block" class="d-block p-2 bg-dark text-white">d-block</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

关于javascript - 如何同时使用多个 Bootstrap 4 显示类切换内容显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47396993/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com