活动菜单项的子菜单的不同包装答案

【问题标题】：Different wrap for submenu for active menu item活动菜单项的子菜单的不同包装
【发布时间】：2016-02-09 12:44:58
【问题描述】：

我想为活动子菜单设置不同的包装。我的打字稿：

lib.navigation.sidebar = COA
lib.navigation.sidebar {
    10 = HMENU
    10 {
        entryLevel = 0
        1 = TMENU
        1 {
            wrap = <nav class="section-subnav"><ul class="nav nav-pills nav-stacked subnav subnav-1">|</ul></nav>
            expAll = 1
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = nav_title // title
                wrapItemAndSub = <li>|</li>
                stdWrap.wrap = |&nbsp;<span class="subnav-toggle"><i class="fa fa-angle-right"></i></span>
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active js-subnav-toggle">|</li>
            }
            CUR < .ACT
        }
        2 = TMENU
        2 {
            ###
            ### This wrap should have class "in" for active submenu:
            ### wrap = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse in">|</ul>
            ###
            wrap = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse">|</ul>

            expAll = 0
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = nav_title // title
                wrapItemAndSub = <li>|</li>
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active">|</li>
            }
            CUR < .ACT
        }
    }
}

基本上，如果我们有带有状态 ACT 的项目，我需要在包装的 UL 中再添加一个 css 类。如有任何提示，我将不胜感激。

【问题讨论】：

标签： typo3 typoscript

【解决方案1】：

您正在寻找的是项目状态 IFSUB、CURIFSUB 和 ACTIFSUB。
https://docs.typo3.org/typo3cms/TyposcriptReference/MenuObjects/CommonItemStates/Index.html

但是你不能用这个改变子菜单包装，你有另一个选择器然后（li.active>ul）

但是，这里还有另一个答案可能会对您有所帮助：
Change wrap of TMENU when active menu item has a submenu

【讨论】：

我看到并尝试使用该解决方案。它不适用于我的情况

【解决方案2】：

好的，这应该可以解决问题，那么：

        (...)
        2 = TMENU
        2 {
            wrap = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse">|</ul>
            wrap.override = <ul class="nav nav-pills nav-stacked subnav subnav-2 collapse in">|</ul>
            expAll = 0
            noBlur = 1
            NO = 1
            NO {
                ATagTitle.field = nav_title // title
                wrapItemAndSub = <li>|</li>
            }
            ACT < .NO
            ACT {
                wrapItemAndSub = <li class="active">|</li>
                 before.cObject = LOAD_REGISTER
                 before.cObject.actsubmenu = TEXT
                 before.cObject.actsubmenu.value = 1
             }
            CUR < .ACT
            wrap.override.if.isTrue.data = REGISTER:actsubmenu
        }
        (...)

也许这个帖子也可以帮助你：
Change wrap of TMENU when active menu item has a submenu

【讨论】：

【解决方案3】：

我在使用 ZURB 的 Foundation 框架时遇到了同样的问题。使用起来有点尴尬，但父菜单项上的linkWrap 是您的朋友。更多解释请参见 TypoScript 中的 cmets：

10 = HMENU
10 {
    1 = TMENU
    1 {
        wrap = <ul class="menu vertical" data-accordion-menu>|</ul>
        noBlur = 1
        # Necessary to have submenus already rendered
        expAll = 1

        NO {
            wrapItemAndSub = <li>|</li>
            stdWrap.htmlSpecialChars = 1
        }

        ACT < .NO
        ACT = 1
        ACT {
            wrapItemAndSub = <li class="active">|</li>
        }

        # Add the submenu opening <ul>, if our 1st-level item has a submenu
        IFSUB = 1
        IFSUB {
            wrapItemAndSub = <li>|</li>
            linkWrap = |<ul class="menu vertical nested">
        }

        # Add the submenu opening <ul> if our 1st-level item has children and have the submenu open on load
        CURIFSUB = 1
        CURIFSUB {
            wrapItemAndSub = <li>|</li>
            linkWrap = |<ul class="menu vertical nested is-active">
        }

        # Same as above if any submenu item is currently active
        ACTIFSUB = 1
        ACTIFSUB {
            wrapItemAndSub = <li class="active">|</li>
            linkWrap = |<ul class="menu vertical nested is-active">
        }
    }

    2 = TMENU
    2 {
        # Close the previously openend <ul>
        wrap = |</ul>
        noBlur = 1
        expAll = 1

        NO {
            wrapItemAndSub = <li>|</li>
            stdWrap.htmlSpecialChars = 1
        }

        ACT < .NO
        ACT = 1
        ACT {
            wrapItemAndSub = <li class="active">|</li>
        }
    }
}

【讨论】：