基金會導航頂部欄不適用於百里香

Question

我有一個使用Spring MVC + thymeleaf的HTML模板文件，我正在嘗試使用Foundation的“頂欄”組件在頁面頂部創建一個可導航菜單。

到目前為止，顯示了菜單欄，但是當光標放在頂部時，沒有顯示菜單。

我可以顯示與主菜單選項相關的子菜單（位於欄上的子菜單），但是子菜單不起作用，因為當我單擊第一個子菜單上的某個選項時，菜單關閉，而不是顯示另一個子菜單。菜單。

我的HTML文件如下所示：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/foundation.min.css}" />
</head>
<body>
    <nav class="top-bar" role="navigation" data-topbar="true">
        <ul class="title-area">
            <li class="name">
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
            </li>
        </ul>

        <section class="top-bar-section">
            <ul class="left">
                <li class="divider"></li>
                <li class="has-dropdown"><a href="#"><span th:text="#{menu.administration}"></span></a>
                    <ul class="dropdown">
                        <li class="has-dropdown"><a href="#"><span th:text="#{menu.administration.material}"></span></a>
                            <ul class="dropdown">
                                <li><a href="#"><span th:text="#{menu.administration.ontology}"></span></a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </section>
    </nav>

<div>
    <div class="large-12 columns">
        <h2 th:text="#{material.search.title}"></h2>
    </div>
</div>

<script th:href="@{/js/vendor/jquery.js}"></script>
<script th:href="@{/js/foundation.min.js}"></script>
<script th:href="@{/js/foundation/foundation.topbar.js}"></script>
<script th:href="@{/js/vendor/modernizr.js}"></script>

<script>
    jQuery(document).ready({
        jQuery(document).foundation();
    });
 </script>  

</body>
</html>

我確定我的資源已正確導入。

另外，我必須使用data-topbar="true"因為如果僅使用data-topbar ，則頁面渲染時會失敗，並說它在屬性名稱后會出現= 。

難道我做錯了什么？

非常感謝您的幫助！

Answer 1

您的th:text="#{menu.administration}無法正常工作

結構應該是

<h1 th:text="${header.title}">title</h1>

<small th:text="${header.subtitle}">Subtitle</small>

您不能空着並期望值

請查看教程http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

Answer 2

問題出在我用來導入JS文件的屬性中。

如我的代碼所示，導入看起來像這樣：

<script th:href="@{/js/foundation.min.js}"></script>

但是要導入腳本文件， href屬性是錯誤的，它必須是src所以正確的格式是：

<script th:src="@{/js/foundation.min.js}"></script>

我知道這是一個愚蠢的錯誤，但我希望它可以對其他人有所幫助。

編譯或生成頁面時從未顯示錯誤的事實讓我有些擔心。

基金會導航頂部欄不適用於百里香

問題描述

2 個解決方案

解決方案1
1 2015-03-02 21:24:16

解決方案2
1 已采納 2015-03-09 22:41:40

基金會導航頂部欄不適用於百里香

問題描述

2 個解決方案

解決方案1 1 2015-03-02 21:24:16

解決方案2 1 已采納 2015-03-09 22:41:40

解決方案1
1 2015-03-02 21:24:16

解決方案2
1 已采納 2015-03-09 22:41:40