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 子句，有关详细信息，您可以阅读下一个链接:

使用!important"有什么影响?在 CSS 中?

因此，替代方案(或好的做法)是从要显示的项目中删除 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屋！