bootstrap 4 使用 js 隐藏元素

Question

我想在页面上隐藏一些使用“d-md-block”类的元素。 由于类定义的重要性，我不能使用 jquery 隐藏/显示功能。

例如，我希望一个元素在桌面上可见

<div id="test" class="d-none d-md-block">Welcome User!</div>

可见性按预期工作。 然后，当用户单击按钮时，我想切换可见性（由于 d-md-none 类而失败）

 $('#btn').on('click',function(){$('#test').hide();});
   $('#anotherBtn').on('click',function(){$('#test').show();});

知道如何解决这个问题吗？

Answer 1

在 bootstrap-4 中显示和隐藏元素有一个简单的解决方法。由于d-none 类分配了display: none !imporatant 属性，您可以通过JavaScript 简单地添加和删除该类来模拟hide 和show 操作。像这样的：

$('#btn').on('click', function() {
  $('#test').removeClass('d-block')
});
$('#anotherBtn').on('click', function() {
  $('#test').addClass('d-block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div id="test" class="d-none d-md-block">Welcome User!</div>
<button id='btn'>Hide</button>
<button id='anotherBtn'>Show</button>