當與Thymeleaf一起使用時，帶有切換按鈕的圖標

我正在使用Spring MVC和百里香葉的HTML5模板文件。在模板中，我試圖使用頁面頂部的切換按鈕創建可導航菜單。當與Thymeleaf一起使用時，帶有切換按鈕的圖標

顯示切換按鈕，但點擊它時不按預期切換菜單。但是，當我使用相同的代碼在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>

任何援助是高度讚賞。

來源

2017-10-17 olammy

您需要提供可驗證和工作的例子，人們實際上可以調試。 –

謝謝羅伯特韋德的迴應。我會更新代碼 – olammy

用您提供的內容是否在HTML標籤中指定了一個有效的標籤以便瀏覽器解釋您的模板？

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

此外，如果你想使模板兼容HTML5，您可以更新您的thymeleaf屬性數據的前綴，它允許HTML5來解釋你的模板，您可以將HTML標記作爲標準。

<html></html> 

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

任一選項應該工作

來源

2017-10-17 13:24:48 reh

謝謝@ 23rharris。但是，這種解決方案不起作用。我已經嘗試過很多次了。而這項工作在普通的HTML上。 – olammy

是啊！如果你仍然堅持提供你的答案更詳細的信息，看看我們能否幫助你多一點 – reh

當與Thymeleaf一起使用時，帶有切換按鈕的圖標

回答

相關問題