Question

我正在使用带有Spring MVC和thymeleaf的HTML5模板文件。在模板中，我正在尝试使用页面顶部的切换按钮创建可导航菜单。

显示切换按钮，但点击它时不会按预期切换菜单。但是，当我使用相同的代码在HTML5中执行相同的操作时，“切换”按钮可以完美地工作。

我不知道这可能是一个Thymeleaf问题，或者在Thymeleaf中我需要做些什么来完成这项工作。

有人可以协助我的无知

这是我的代码行，其中包含切换按钮：

<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}" />

以下是我的CSS文件

<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>

以下是Javascript：

public class QueryHelper<T extends Number> {

    private List<T> records;

    public void query(QueryTypes queryType) {
        records = new ArrayList();
        records.add((Number)new Integer(90));        
    }
}

非常感谢任何帮助。

Answer 1

根据您提供的内容，您是否在HTML标记中指定了有效标记，以便浏览器解释您的模板？

<html xmlns:th="http://www.thymeleaf.org"></html>

此外，如果您想使模板符合HTML5，您可以将百万美元属性更新为数据前缀，允许HTML5解释您的模板，您可以将html标记保留为标准。

 <html></html>

 <a href="#" data-th-href="@{/home}" class="logo">

任一选项都应该起作用

与Thymeleaf一起使用时，带有Toggle Button的Porblem

1 个答案: