javascript - 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 和 显示操作。像这样的事情:

$('#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>