jQuery show() 不会使 Bootstrap d-none 类可见 [英] jQuery show() won't turn Bootstrap d-none class visible
问题描述
我 99% 确定我在这里遗漏了一些非常明显的东西.在下一个示例中,单击按钮应该使带有 .progress
类的 div 可见.但是,它不起作用.
function func() {$('.progress').show();}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 完整性="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="匿名"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiWSnjCross"="匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5storigt;m>/脚本><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwgnJ8ER"cross;<div class="progress d-none">不再隐藏!
<button onclick="func()">点击我</button>
这里的问题是 Bootstrap 4 的 d-none
实用程序类添加了下一个 .progress
元素的 >CSS 样式:
.d-none {显示:无!重要;}
另一方面,当您从 jQuery 调用 show()
方法时,它会将 display: block
样式添加到上述元素.但是,之前的样式仍然优先于这个样式,并且元素保持隐藏状态.这是由于 !important
子句,有关详细信息,您可以阅读下一个链接:
因此,替代方案(或好的做法)是从要显示的项目中删除 d-none
类.
function func(){$('.progress').removeClass("d-none");}
示例:
在下一个示例中,切换 d-none
类以更改 .progress
元素的可见性:
function func(){$('.progress').toggleClass("d-none");}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 完整性="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="匿名"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiWSnjCross"="匿名"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5storigt;m>/脚本><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwgnJ8ER"cross;<div class="container-fluid"><h2 class="progress mt-2 d-none bg-warning">不再隐藏!<button onclick="func()" class="btn btn-primary">点击我按钮>
I'm 99% sure I'm missing something terribly obvious here. On the next example, clicking the button should make the div with the .progress
class visible. however, it is not working.
function func() {
$('.progress').show();
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="progress d-none">
No longer hidden!
</div>
<button onclick="func()">
click me
</button>
The issue here is that the d-none
utility class from Bootstrap 4 adds the next CSS
style to the .progress
element:
.d-none {
display: none!important;
}
On the other hand, when you invoke the show()
method from jQuery, it adds the display: block
style to the mentioned element. However, the previous style still has priority over this one, and the element remains hidden. This is due to the !important
clause, for details you can give a read to the next link:
What are the implications of using "!important" in CSS?
So, the alternative (or good practice) is to remove the d-none
class from the item you want to show.
function func()
{
$('.progress').removeClass("d-none");
}
Example:
On the next example, the d-none
class is toggled in order to change the visibility of the .progress
element:
function func()
{
$('.progress').toggleClass("d-none");
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
<h2 class="progress mt-2 d-none bg-warning">
No longer hidden!
</h2>
<button onclick="func()" class="btn btn-primary">
click me
</button>
</div>
这篇关于jQuery show() 不会使 Bootstrap d-none 类可见的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!