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

Question

我正在努力寻找一种干净的方法来单击切换侧面导航栏的显示，同时使用几个 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 !important。sb-collapsable 类可以帮助我找到我想在 jQuery 中隐藏的所有东西。我真的很感激任何帮助。我尝试了很多不同的东西，并四处寻找类似的问题，但没有提出任何问题。

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

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

Answer 1

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

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

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'