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>

bootstrap 4使用js隐藏元素

1 个答案: