bootstrap 4使用js隐藏元素
bootstrap 4使用js隐藏元素
提问于 2018-08-27 14:45:08
我想在页面上隐藏一些使用类'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();});你知道怎么解决这个问题吗？
回答 1
Stack Overflow用户
发布于 2018-08-27 14:51:24
有一个简单的方法可以在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52033854
复制相关文章
相似问题
腾讯云开发者
