jQuery Show/Hide 不适用于 Bootstrap 4

Question

我正在升级到 Bootstrap 4，并注意到我们所有的 jQuery 显示/隐藏在使用隐藏属性时都无法正常工作。如果我在 show() 之后删除 hidden 属性，它可以正常工作。 Bootstrap 3 不需要这样做。

不幸的是，为了升级到 Bootstrap 4，我必须更改大约 1400 个显示/隐藏。有人知道问题是什么，或者有一个简单的解决方案可以在不更改 1400 行代码的情况下解决这个问题吗？

$(document).ready(function() {
  $("#hide").click(function() {
    $("p").hide();
  });
  $("#show").click(function() {
    $("p").show();
    //$("p").removeAttr("hidden");
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p hidden>If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

Answer 1

您应该首先在头中包含指向 bootstrap.css 代码的链接标签，然后在任何标签的 en 和结束正文标签之前，您必须按顺序添加 em> Jquery.js popper.js（如果在您的代码中使用），然后是 bootstrap.js 文件

Answer 2

它不起作用，因为Bootstrap 库首先加载，而jQuery 功能没有首先加载。

尝试改变顺序，如 jQuery > Boostrap。

$(document).ready(function() {
  $("#hide").click(function() {
    $("p").hide();
  });
  $("#show").click(function() {
    $("p").show();
    //$("p").removeAttr("hidden");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<p hidden>If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

Answer 3

一切正常，您需要先包含 jquery，然后再包含 bootstrap.js

$(document).ready(function() {
  $("#hide").click(function() {
    $("#test").removeClass('d-block').addClass('d-none');
  });
  $("#show").click(function() {
    $("#test").removeClass('d-none').addClass('d-block');
  });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<p id="test" class="d-none">If you click on the "Hide" button, this paragraph should disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>