我正在使用 Spring Boot、Bootstrap 4 和 Thymeleaf 开发网络应用程序。 我想显示 Bootstrap 警报，然后它会在几秒钟后自动隐藏(就像“成功”通知一样)。
我找到了很多解决方案，但都需要 JavaScript。当我尝试在我的项目中使用 JS 时，它不起作用。
我使用默认模板，通过 layout:decorate="~{default}" 在其他 View 中使用该模板。在这个默认模板中，我有 Bootstrap 链接和脚本:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
...
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>如果在任何 View 中放入以下代码，它什么都不做。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{default}">
<head>
...
</head>
<body class="text-center">
<div layout:fragment="content">
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini">Add to Wishlist </a>
<a href="" class="btn btn-mini"> Purchase </a>
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500)
.slideUp(500, function () {
$("#successalert").slideUp(500);
});
});
});
</script>
...
</div>
</body>注意:这只是检查 JS 是否不起作用的示例。我取自 this post .
当我运行这段代码时，会显示警报，但它永远不会消失。我尝试了很多脚本，但从未奏效。
可能是兼容版本问题？
最佳答案
您好，我认为这篇文章可以解决您的问题:
Why does jQuery throw the error `fadeOut is not a function'?
在这一行<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>你使用的是 Jquery 的精简版而不是完整版，当我在 Firefox 开发人员工具控制台中单击“添加到心愿单”链接时会出现 TypeError 提示。
TypeError: $(...).fadeTo is not a function ，这意味着 Jquery javascript 对象 $("#success-alert")没有附上 fadeTo功能。
您可以在这里获得完整的缩小版本:https://code.jquery.com/
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
PS:如果不需要SRI你可以删除 integrity和 crossorigin属性。
关于JavaScript 不适用于 bootstrap 4 + thymeleaf，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54668051/