我正在使用带有 Spring MVC 和 thymeleaf 的 HTML5 模板文件。在模板中，我尝试使用页面顶部的切换按钮创建一个可导航的菜单。
显示切换按钮，但单击它时不会按预期切换菜单。但是，当我使用相同的代码在 HTML5 中执行相同的操作时，“切换”按钮可以完美运行。
我不知道这可能是 Thymeleaf 的问题，还是我需要在 Thymeleaf 中做任何事情才能完成这项工作。
有人可以帮助我的无知
这是我的包含切换按钮的代码行:
<a href="#" th:href="@{/home}" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>Ai</b>Admin</span> <!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Ai</b>Admin</span>
</a>
下面是我的CSS文件
<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap/dist/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="@{/assets/font-awesome/css/font-awesome.min.css}" />
<link rel="stylesheet" th:href="@{/assets/ionicons/css/ionicons.min.css}" />
<link rel="stylesheet" th:href="@{/assets/dist/css/aiAdmin.min.css}" />
<link rel="stylesheet" th:href="@{/assets/dist/css/skins/_all-skins.min.css}" />
<link rel="stylesheet" th:href="@{/assets/plugins/morris/morris.css}" />
<link rel="stylesheet" th:href="@{/assets/plugins/jvectormap/jquery-jvectormap.css}" />
<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css}" />
<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-daterangepicker/daterangepicker.css}" />
<link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css}" />
下面是 Javascript:
<script th:src="@{/assets/plugins/jQuery/dist/jQuery.min.js}"></script>
<script th:src="@{/assets/plugins/jQueryUI/jquery-ui.min.js}"></script>
<script th:src="@{/assets/plugin/bootstrap/dist/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/plugins/raphael/raphael.min.js}"></script>
<script th:src="@{/assets/plugins/morris/morris.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-sparkline/dist/jquery.sparkline.min.js}"></script>
<script th:src="@{/assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js}"></script>
<script th:src="@{/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js}"></script>
<script th:src="@{/assets/plugins/jquery-knob/dist/jquery.knob.min.js}"></script>
<script th:src="@{/assets/plugins/moment/min/moment.min.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-daterangepicker/daterangepicker.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js}"></script>
<script th:src="@{/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js}"></script>
<script th:src="@{/assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/assets/plugins/fastclick/lib/fastclick.js}"></script>
<script th:src="@{/assets/dist/js/aiadmin.min.js}"></script>
<script th:src="@{/assets/dist/js/pages/dashboard.js}"></script>
<script th:src="@{/assets/dist/js/aiadmin.js}"></script>
<script th:src="@{/assets/dist/js/display.js}"></script>
非常感谢任何帮助。
最佳答案
根据您提供的内容，您是否在 HTML 标记中指定了一个有效标记以便浏览器解释您的模板？
<html xmlns:th="http://www.thymeleaf.org"></html>
此外，如果您想使模板与 HTML5 兼容，您可以将 thymeleaf 属性更新为数据前缀，这允许 HTML5 解释您的模板，并且您可以将 html 标记保留为标准。
<html></html>
<a href="#" data-th-href="@{/home}" class="logo">
任何一个选项都应该有效
关于javascript - 与 Thymeleaf 一起使用时切换按钮出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46789950/