jQuery show() 不会让 Bootstrap d-none 类可见

Question

我99%确定我在这里错过了一些非常明显的东西。在下一个示例中，单击该按钮应使具有.progress类的div 可见。但是，它不起作用。

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>

Answer 1

这里的问题是Bootstrap 4中的d-none实用程序类将下一个CSS样式添加到.progress元素中：

.d-none {
display: none!important;
}

另一方面，当您从jQuery调用show()方法时，它会将display: block样式添加到提到的元素中。但是，以前的样式仍然优先于此样式，并且该元素保持隐藏状态。这是由于!important条款，有关详细信息，您可以阅读下一个链接：

在CSS中使用"！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" 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>

Answer 2

jquery的show与Bootstrap的d-none不兼容。您可以使用折叠 - https://getbootstrap.com/docs/4.1/components/collapse/- 代替

Answer 3

当您不确定元素如何隐藏时，请使用 Bootstrap 的d-none或常规display: none，但无论如何都需要使其可见，只需使用以下代码：

$(el).removeClass("d-none").show();

Answer 4

您可以创建自己的函数，如下所示。

$.fn.bsShow = function(){
$(this).removeClass('d-none');
}
$.fn.bsHide = function(){
$(this).addClass('d-none');
}

然后你可以像普通的jQuery一样使用显示/隐藏功能。

$(".progress").bsShow();
$(".progress").bsHide();