使 js 代码工作添加 - 在 TYPO3 TS 菜单中删除一个类 [英] Make js-code work to add - remove a class in TYPO3 TS menu

问题描述

我喜欢为 TYPO3 站点导航实现这种效果 - 请参阅此处的代码笔:

https://codepen.io/mr_vespa/pen/zYryZQo

加载时菜单会突出显示第一个选项卡.单击时，所选选项卡将突出显示.这两种影响都没有发生.

1. 如何获得主动"仅在第一个菜单选项卡上的类
2. 为什么没有应用 js 代码包括 jquery 和 js 代码/TYPO3 版本 9.*

菜单代码(编码用于 Foundation 6.4.2 下拉菜单).并且工作正常.

 lib.nav_main = COAlib.nav_main {10 = HMENU10 {#wrap = <div class="top-bar-right">|</div>入门级 = 01 = TMENU1 {expAll = 1无模糊 = 1wrap = 
|#allWrap = 
|}}2 = TMENU2 {expAll = 1无模糊 = 1wrap = <ul class="submenu menu vertical";数据子菜单>|</ul>目标 = _top不 {stdWrap.htmlSpecialChars = 1wrapItemAndSub = 
|
#allWrap = 
|}}3 = TMENU3 {无模糊 = 1wrap = <ul class="submenu menu vertical";数据子菜单>|</ul>目标 = _top不 {stdWrap.htmlSpecialChars = 1wrapItemAndSub = 
|
#allWrap = 
 解决方案 
推荐使用MenuProcessor TYPO3 9 或更高版本.它非常简单且非常灵活.第一步是让 TYPO3 9 知道应该处理哪些页面.一个基本的例子.
在你的 page = PAGE typoscript:
page = PAGE页 {10 = 流体模板10 {模板 = 文件template.file = EXT:yourExtension/Resources/Private/Templates/index.htmlpartialRootPath = EXT:yourExtension/Resources/Private/Partials/layoutRootPath = EXT:yourExtension/Resources/Private/Layouts/7000 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor7000{等级 = 3包含间隔 = 1入门级 = 0as = 主导航}}}
它的作用是调用 MenuProcessor 并根据您定义的参数发出数据库请求.本例中的参数:
includeSpacer = 包含Spacer"输入菜单
levels = Menuprocessor 应该寻找多少级
entryLevel = 应该从哪个级别开始.0 表示根页面等
as = 是将在 FrondEnd 中与 MenuProcessor
 的结果一起传递的变量
您的 HTML(可能在您的布局上?)
您将不得不使用模板以获得您想要的结果.这是一个例子.不是 100% 测试，但它应该可以工作.
布局:
只是调用菜单部分
部分(菜单/MainNavigation.html)
<button class="menu-icon";类型=按钮"data-toggle=responsive_nav"></button><div class="title-bar-title">菜单</div>
<div id="responsive_nav";class =顶栏"><div class="top-bar-left"><a class="title_bar_logo";href={f:uri.page(pageUid:1)}"><f:image src="fileadmin/logo.svg";class="hide-for-small-only"/></a>
<div class="top-bar-left"><f:render partial="Menu/Render/List";参数={记录:主导航，类:'下拉菜单'，设置:设置，isFirstLevel : 1}"/>

创建基础导航的默认架构.之后，我们将列表称为部分.我们所做的是每次 MenuProcessor 找到子菜单时调用列表.这意味着每次菜单项有子项时，都会调用列表部分.所以我们不必手动编写 10 级 HTML.

部分(菜单/渲染/列表.html)

<f:render partial="Menu/Render/Item";参数={项目:项目，设置:设置}"/></f:for>

在这里我们创建列表模式并调用子项(

项).

局部(菜单/渲染/Item.html)

<li class="nav__item {_classActive}"><a href="{item.link}";目标={item.target}"；标题={item.title}">{item.title}</a><f:if condition="{item.children->f:count()} >0″＞<f:render partial="Menu/Render/List";参数={记录:item.children，设置:设置，类:'菜单垂直'}"/></f:if>

这里我们创建了

模式，如果这个菜单项有一个子菜单，我们就调用这个列表.

有用的链接:

• MenuProcessor 简介
• 各种处理器
• 基础框架扩展(即将针对 TYPO3 10 进行更新)

如有任何问题，请随时提出.

最好的问候，

I like to achieve this effect for a TYPO3 site navigation - see the codepen here:

https://codepen.io/mr_vespa/pen/zYryZQo

On load the menu has the first tab highlighted. On click the selected tab will be highlighted. Both effects are not taking place.

1. How to get an "active" class on the first menu tab only
2. why is the js-code not applied both jquery and the js-code are included/ TYPO3 version 9.*

The menu code (which is coded for use with Foundation 6.4.2 dropdown menu). and working fine.

    lib.nav_main = COA
lib.nav_main {
    10 = HMENU
    10 {
        #wrap = <div class="top-bar-right">|</div>
        entryLevel = 0
        1 = TMENU
        1 {
            expAll = 1
            noBlur = 1
            wrap = <ul class="dropdown menu" data-dropdown-menu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
            ACT <.NO
            ACT{
            wrapItemAndSub = <li class="has-submenu">|</li>
        }
        }
        2 = TMENU
        2 {
            expAll = 1
            noBlur = 1
            wrap = <ul class="submenu menu vertical" data-submenu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
            ACT <.NO
            ACT{
            wrapItemAndSub = <li class="has-submenu">|</li>
        }
        }
        3 = TMENU
        3 {
            noBlur = 1
            wrap = <ul class="submenu menu vertical" data-submenu>|</ul>
            target = _top
            NO {
                stdWrap.htmlSpecialChars = 1
                wrapItemAndSub = <li class="has-submenu">|</li>
                #allWrap = <div class=" ">|</div>
            }
               
                }
     
        }
        }

解决方案

It is recommended to use the MenuProcessor with TYPO3 9 or higher. It is very easy and extremely flexible. The first step is to let TYPO3 9 know which Pages should process. A basic example.

On your page = PAGE typoscript:

page = PAGE
page {
   10 = FLUIDTEMPLATE
   10 {
       template = FILE
       template.file = EXT:yourExtension/Resources/Private/Templates/index.html
       partialRootPath = EXT:yourExtension/Resources/Private/Partials/
       layoutRootPath =  EXT:yourExtension/Resources/Private/Layouts/

       7000 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
       7000 {
         levels = 3
         includeSpacer = 1
         entryLevel = 0
         as = mainnavigation
       }
    }
 }

What this does, is to call the MenuProcessor and it makes a database request based on the arguments you defined. The arguments in this example:

• includeSpacer = Includes the "Spacer" type in the menus
• levels = How many levels should the Menuprocessor look for
• entryLevel = From which level should start. 0 means root page and so on
• as = is the variable that will be passed in the FrondEnd with the results of the MenuProcessor

Your HTML (Maybe on your Layouts?)

You will have to play around with the templates in order to get your desire result. Here is an example. Not 100% tested but it should work.

Layouts:

<f:render partial="Menu/MainNavigation" arguments={_all} />

Just calling the Menu partial

Partials (Menu/MainNavigation.html)

<div class="title-bar" data-responsive-toggle="responsive_nav" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle="responsive_nav"></button>
    <div class="title-bar-title">Menu</div>
</div>

<div id="responsive_nav" class="top-bar">
   <div class="top-bar-left">
        <a class="title_bar_logo" href="{f:uri.page(pageUid:1)}">
            <f:image src="fileadmin/logo.svg" class="hide-for-small-only"/>
        </a>
   </div>
   <div class="top-bar-left">
     <f:render partial="Menu/Render/List" arguments="{
            records : mainnavigation,
            class   : 'dropdown menu',
            settings: settings,
            isFirstLevel : 1
        }"/>
   </div>
</div>

Creating the default schema of the foundation navigation. After that we call the list partial. What we do is to call the list every time the MenuProcessor finds a submenu. Meaning that every time that a menu item has children, then the list partial will be called. So we do not have to manually write 10 levels of HTML.

Partials (Menu/Render/List.html)

<ul class="class="{class}" {f:if(condition:'{isFirstLevel} == 1', then: 'data-dropdown-menu', else: '')}">
    <f:for each="{records}" as="item" iteration="i">
        <f:render partial="Menu/Render/Item" arguments="{
            item    : item,
            settings: settings
        }"/>
    </f:for>
</ul>

Here we create the list schema and we call the children (<li> items).

Partials (Menu/Render/Item.html)

<f:variable name="_classActive" value="{f:if(condition:'{item.active} == 1', then: 'active', else: '')}"/>

<li class="nav__item {_classActive}">
    <a href="{item.link}" target="{item.target}" title="{item.title}">
        {item.title}
    </a>
   <f:if condition="{item.children->f:count()} > 0">
        <f:render partial="Menu/Render/List" arguments="{
            records : item.children,
            settings: settings,
            class: 'menu vertical'
        }"/>
   </f:if>
</li>

Here we create the <li> schema and we call the list if this menu item has a submenu.

Helpful Links:

• Inroduction to MenuProcessor
• various Processors
• Foundation Framework extension (soon to be updated for TYPO3 10)

For any question, dont hesitate to ask.

Best regards,

这篇关于使 js 代码工作添加 - 在 TYPO3 TS 菜单中删除一个类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！