Porblem с Toggle Button при использовании его с Thymeleaf

Question

Porblem с Toggle Button при использовании его с Thymeleaf

1

Я использую файл шаблона HTML5 с Spring MVC и thymeleaf. В шаблоне я пытаюсь создать навигационное меню, используя кнопку переключения в верхней части страницы.

Отображается кнопка переключения, но при нажатии на нее она не переключает меню, как ожидалось. Однако, когда я делаю то же самое в HTML5, используя тот же код, кнопка Toggle работает отлично.

Я не знаю, может быть, это вопрос Тимелеафа, или есть что-то, что мне нужно сделать в Тимелеафе, чтобы сделать эту работу.

Может ли кто-нибудь помочь моему Неведению?

Вот моя строка кода, которая содержит кнопку переключения:

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

Любая помощь высоко ценится.

olammy 17 окт. 2017, в 15:11

Источник

0

Вы должны предоставить проверяемый и работающий пример, который люди могут на самом деле отлаживать.
Robert Wade 17 окт. 2017, в 12:18
0

Спасибо Роберт Уэйд за ответ. Я обновлю код
olammy 17 окт. 2017, в 12:25

Теги:

javascript

css

html5

thymeleaf

1 ответ

Ещё вопросы

Вы должны предоставить проверяемый и работающий пример, который люди могут на самом деле отлаживать.
Спасибо Роберт Уэйд за ответ. Я обновлю код

23rharris · Answer 1 · 2017-10-17T10-29-00.000Z

С помощью того, что вы указали, вы указали в теге HTML допустимый тег, чтобы браузер интерпретировал ваш шаблон?

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

Также, если вы хотите сделать шаблон HTML5 совместимым, вы можете обновить атрибуты thymeleaf до префикса данных, который позволяет HTML5 интерпретировать ваш шаблон, и вы можете оставить html-тег стандартным.

 <html></html>

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

Любой вариант должен работать

Спасибо @ 23rharris. Однако это решение не работает. Я пробовал это много раз. И эта работа на обычном HTML.
Да нп! Если вы все еще застряли, предоставьте немного больше информации о своем ответе, чтобы увидеть, не могли бы мы помочь вам немного больше