bootstrap 4使用js隐藏元素
bootstrap 4使用js隐藏元素
提问于 2018-08-27 06: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 06: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
复制相关文章
点击加载更多
相似问题
如何在莲花公式中使用@Implode和@Implode
使用依赖于jQuery字符串的HTML展开
在独立列中创建依赖于不同子字符串的值
警告: implode() [<a href='function.implode'>function.implode</a>]：传递的参数无效
如何获取依赖于id对的值
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
