子页面在主导航中未显示为 children（错字 3）

Question

我的页面树中有几个包含子页面的页面，如下所示。

My pagetree with subpages

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

我已经按照下面的代码（在 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

}

子页面在主导航中未显示为 children（错字 3）

Subpages not showing up as children in mainnavigation (Typo3)

typo3

typo3-9.x