2017-10-17 4 views
1

私はSpring MVCとthymeleafでHTML5テンプレートファイルを使用しています。テンプレートでは、ページの上部にあるトグルボタンを使用してナビゲーション可能なメニューを作成しようとしています。Thymeleafで使用する際のトグルボタンの悩み

トグルボタンが表示されますが、クリックするとメニューが期待どおりに切り替わりません。しかし、同じコードを使用してHTML5で同じことを行うと、Toggleボタンは完全に機能します。

これは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> 

どんな援助も高く評価されます。

+0

を動作するはずです。 –

+0

Robert Wadeに感謝の意を表する。私はコード – olammy

答えて

0

あなたが指定したものは、ブラウザがあなたのテンプレートを解釈するために、HTMLタグに有効なタグを指定しましたか?テンプレートを作りたいと思った場合

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

はまた、HTML5は、あなたのthymeleafはHTML5があなたのテンプレートを解釈することを可能にするデータのプレフィックスに属性を更新することができますし、標準としてhtmlタグを残すことができます準拠しました。

<html></html> 

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

いずれかのオプションあなたは、人々が実際にデバッグできることを検証し、実施例を提供する必要が

+0

を更新します@ 23rharrisありがとうございます。しかし、この解決法は機能しません。私は何度もそれを試しました。そして、これは普通のHTMLで動作します。 – olammy

+0

ええ、np!あなたがまだ立ち往生している場合は、あなたの答えをもう少し詳しく説明し、もう少しお手伝いできるかどうかを確認してください – reh

関連する問題