基金会导航顶栏不与百里香叶一起工作

I have an HTML template file which uses Spring MVC + thymeleaf and I'm trying to create a navigable menu at the top of the page using Foundation's "top-bar" component.

我有一个使用Spring MVC + thymeleaf的HTML模板文件,我正在尝试使用Foundation的“顶栏”组件在页面顶部创建一个可导航的菜单。

So far, the menu bar is displayed but menus are not being shown when the cursor is placed on top.

到目前为止,显示菜单栏,但光标置于顶部时未显示菜单。

I can display the sub-menus related to my main menu options (the ones placed at the bar) but sub-menus are not working because when I click an option on the first sub-menu, the menu closes instead of displaying another sub-menu.

我可以显示与我的主菜单选项相关的子菜单(放置在栏中的子菜单)但是子菜单不起作用,因为当我点击第一个子菜单上的选项时,菜单关闭而不是显示另一个子菜单菜单。

My HTML file looks like this:

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

I'm sure my resources are being properly imported.

我确信我的资源正在被正确导入。

Also, I had to use data-topbar="true" because if I use data-topbar only, my page fails while rendering saying it a expecting for a = after the property name.

此外,我不得不使用data-topbar =“true”,因为如果我只使用数据顶部栏,我的页面会失败,同时渲染说它期望a =属性名称后面。

Am I doing something wrong?

难道我做错了什么?

Thank you so much for any help guys!

非常感谢你们的帮助!

2 个解决方案

#1

your th:text="#{menu.administration} is not working

你的th:text =“#{menu.administration}无效

the structure should be

结构应该是

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

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

you can't leave the empty and expect a value

你不能留空,期待一个价值

please take a look at the tutorial http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

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

#2

The problem was located in the property I was using to import my JS files.

问题出在我用来导入我的JS文件的属性中。

As seen in my code, the import looks like this:

如我的代码所示,导入如下所示:

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

But to import a script file the href property is wrong, it must be src so the correct format is:

但是要导入一个脚本文件,href属性是错误的,它必须是src所以正确的格式是:

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

I know it was a silly mistake but I hope it helps someone else.

我知道这是一个愚蠢的错误,但我希望它可以帮助别人。

The fact that an error was never shown while compiling nor while generating the page worries me a little.

在编译时或在生成页面时从未显示错误的事实让我感到担忧。

#1