Question

我的页面树中有几页带有子页面的页面，如下所示。

但是，子页面的链接似乎不可单击。

我已按照以下代码（位于Layouts文件夹中的default.html文件中）在Fluid中实现了导航：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="{rl}">Company Name</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>


    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <f:for each="{mainnavigation}" as="mainnavigationItem">
                <f:if condition="{mainnavigationItem.children}">
                    <f:then>
                        <li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')} dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {mainnavigationItem.title}
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <f:for each="{mainnavigationItem.children}" as="child">
                                    <a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>
                                </f:for>
                            </div>
                        </li>
                    </f:then>
                    <f:else>
                        <li class="nav-item {f:if(condition: mainnavigationItem.active, then:'active')}">
                            <a class="nav-link" href="{mainnavigationItem.link}" target="{mainnavigationItem.target}" title="{mainnavigationItem.title}">{mainnavigationItem.title} <span class="sr-only">(current)</span></a>
                        </li>
                    </f:else>
                </f:if>
            </f:for>
        </ul>
    </div>
</nav>

mainnavigation变量在setup.typoscript的扩展程序配置中定义，如下所示。请注意，为了渲染子页面，将级别设置为2。

  dataProcessing {
            10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
            10 {
                references.fieldName = media
            }
            20 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
            20 {
                levels = 2
                includeSpacer = 1
                as = mainnavigation
            }
        }

如下面的图片所示，子页面添加了一个箭头。当我单击此箭头或页面标题时，没有任何反应。

The menu with dropdowns

此外，我在网络控制台中遇到此错误：

Uncaught TypeError: Cannot read property 'fn' of undefined
at util.js:55
at bootstrap.min.js:6
at bootstrap.min.js:6

其中指：

$.fn.emulateTransitionEnd = transitionEndEmulator

Answer 1

您应该查看一下设置-您可以在其中定义导航，另请参见here

Answer 2

您的html代码中存在语法错误。

您的代码：

<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}>{child.title}</a>

应该是：

<a class="dropdown-item" href="{child.link}" target="{child.target}" title="{child.title}">{child.title}</a>

在{child.title}之后缺少“ ，因此未正确关闭。

Answer 3

结果是我没有在setup.typoscript中正确导入JQuery。将以下代码添加到页面后，子页面会正确弹出：

 includeJSFooter {
   jquery = https://code.jquery.com/jquery-3.3.1.slim.min.js
   jquery.external = 1
   popper = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
   popper.external = 1
   bootstrap = https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
   bootstrap.external = 1

}

子页面在主导航中不显示为子级（Typo3）

3 个答案: