包裹菜单中的每个x项目

问题描述 投票：0回答：1

<div class="nav nav_main">
    <ul class="level-1">
        <li class="level-1 norm uid_2"><a class="level-1 norm" href="company/at-a-glance/"><span>Company</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="company/at-a-glance/"><span>At a glance</span></a>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="company/culture-and-values/"><span>Culture and values</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c24">History</a>
                                    </li>
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/culture-and-values/#c25">Corporate culture</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-worldwide/"><span>Uhlmann worldwide</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-worldwide/#c231">Germany</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="company/uhlmann-group/"><span>Uhlmann Group</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="company/uhlmann-group/#c29">visiotec</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" target="_blank" href="company/lieferanten-portal/"><span>Lieferanten-Portal</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="level-1 norm uid_3"><a class="level-1 norm" href="solutions/capsules-tablets/"><span>Solutions</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/capsules-tablets/"><span>Capsules, tablets</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/capsules-tablets/#c40">Blister machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/vials-ampoules-syringes/"><span>Vials, ampoules, syringes</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/vials-ampoules-syringes/#c64">Blister machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/blister-bottles/"><span>Blister, bottles</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c75">Cartoners</a>
                                    </li>
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/blister-bottles/#c76">Stretch-banding machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/cartons-cases/"><span>Cartons, cases</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/cartons-cases/#c83">Stretch-banding machines</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/automation-and-software/"><span>Automation and software</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/automation-and-software/#c94">PDA &amp; SCADA</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="solutions/inspection-systems/"><span>Inspection systems</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="solutions/inspection-systems/#c98">BottleChrom</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="level-1 norm uid_4"><a class="level-1 norm" href="products/blister-machines/"><span>Products</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="products/blister-machines/"><span>Blister machines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/blister-machines/#c109">Blister machine B 1240</a></li>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/cartoners/"><span>Cartoners</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/cartoners/#c123">Cartoner C 130</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/blister-lines/"><span>Blister lines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/blister-lines/#c130">Blister line BEC 300</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/end-of-line-packaging-machines/"><span>End-of-line packaging machines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/end-of-line-packaging-machines/#c133">Stretch-banding machines</a></li>
                                    </li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/bottle-lines/"><span>Bottle lines</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/bottle-lines/#c144">Bottle line IBC 120</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/feeders/"><span>Feeders</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/feeders/#c148">For solid dose products</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="products/competences/"><span>Competences</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="products/competences/#c158">Containment</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
        <li class="level-1 norm uid_5"><a class="level-1 norm"   href="services/advice/"><span>Services</span></a>

            <div class="level-2-wrapper-outer">
                <div class="level-2-wrapper">
                    <div class="level-2-wrapper-inner">
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="services/advice/"><span>Advice</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/advice/#c170">Quote and order management</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/support/"><span>Support</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/support/#c174">Telephone support</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/on-site-services/"><span>On-Site Services</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/on-site-services/#c177">Response time</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/spare-parts/"><span>Spare parts</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/spare-parts/#c180">Spare parts availability</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/format-parts/"><span>Format parts</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/format-parts/#c184">Format and tool sets</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/upgrades-and-rebuilds/"><span>Upgrades and rebuilds</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/upgrades-and-rebuilds/#c186">Electrical upgrades</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/automation-and-software/"><span>Automation and software</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/automation-and-software/#c191">PDA &amp; SCADA</a></li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="level-2">
                            <li class="level-2 norm"><a class="level-2 norm" href="services/training/"><span>Training</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/training/#c194">Operator training</a></li>
                                </ul>
                            </li>
                            <li class="level-2 norm"><a class="level-2 norm" href="services/validation-and-calibration/"><span>Validation and calibration</span></a>
                                <ul class="level-3">
                                    <li class="level-3 norm"><a class="level-3 norm" href="services/validation-and-calibration/#c198">Validation of new machines</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

根据问题Menu: wrap every X item，如果我不知道菜单元素的确切数量，我如何包装每个x元素？

如果我使用the answer of chrisBerlin问题是它只适用于例如3个要素。

但是，对于每个父项的子动态计数，它会输出一个无效的代码。 我怎么解决这个问题？我的代码显示了HMENU的3个级别。我需要2级的x-wrap。我每行使用7个元素。

在我的页面上，第一个元素有例如5个孩子。所以<ul class="level-2">没有关闭。

tmp.nav_main = COA
tmp.nav_main{
    10 = COA
    10{
        10 = HMENU
        10{
            wrap = <ul class="level-1">|</ul>
            entryLevel = {$t3d_navigation.nav_main_entryLevel}
            excludeUidList = {$t3d_navigation.nav_main_excludeUidList}
            1 = TMENU
            1 {
                IProcFunc = user_tmenulinebreak->main
                expAll = 1
                NO{
                    wrapItemAndSub = <li class="level-1 norm uid_{field:uid}">|</li>
                    wrapItemAndSub.insertData = 1
                    ATagParams = class="level-1 norm"
                    stdWrap.wrap = <span>|</span>
                }
                CUR < .NO
                CUR.wrapItemAndSub = <li class="level-1 click uid_{field:uid}">|</li>
                CUR.wrapItemAndSub.insertData = 1
                CUR.ATagParams = class="level-1 click"
                CUR = 1
                ACT < .CUR
                ACT = 1
            }
            2 < .1
            2 {
                wrap = <div class="level-2-wrapper-outer"><div class="level-2-wrapper"><div class="level-2-wrapper-inner">|</div></div></div>
                expAll = 1
                NO{
                    wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li> || <li class="level-2 norm">|</li></ul>|*|
                    ATagParams = class="level-2 norm"
                }
                CUR.wrapItemAndSub = |*|<ul class="level-2"><li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li> || <li class="level-2 click">|</li></ul>|*|
                CUR.ATagParams = class="level-2 click"
                ACT < .CUR
                ACT = 1
            }
            3 < .1
            3 {
                wrap = <ul class="level-3">|</ul>
                expAll = 1
                NO{
                    wrapItemAndSub = <li class="level-3 norm">|</li>
                    doNotShowLink = 1
                    after{
                        cObject = TEXT
                        cObject{
                            typolink{
                                parameter = {field:pid}#{field:uid}
                                parameter.insertData = 1
                                ATagParams = class="level-3 norm"
                            }
                            data = field:title
                        }
                    }
                }
                CUR{
                    wrapItemAndSub = <li class="level-3 click">|</li>
                    doNotShowLink = 1
                    after{
                        cObject = TEXT
                        cObject {
                            typolink{
                                parameter = {field:pid}#{field:uid}
                                parameter.insertData = 1
                                ATagParams = class="level-3 click"
                            }
                            data = field:title
                        }
                    }
                }
                ACT < .CUR
                ACT = 1
            }
        }
    }
}

在我的特殊情况下，我需要在<ul class="level-2"></ul>中使用1-7个项目，如果有超过7项，则新行必须从下一个8-14元素开始。如果有超过14个新行。

menu typo3 typoscript
1个回答
2
投票

Read the docs它提供了很多线索，optionSplit的有效语法是：

 first-element(s) |*| middle-element(s) |*| last-element(s)
  • 优先级是last，first，middle，这意味着如果你有一个项目，只会使用last段，
  • 如果将有两个项目，它将是订单first, last
  • 如果你有3个或更多的项目，将有first, middle(s), last

每个段可以有编号的子段除以||。

您只在中间部分使用带编号的子分段，您需要修复它。

另外一点是，选项Split必须在所有情况下都有效，当只有1,2或3个项目可用时，你使用它的方式会导致ul未关闭的情况，换句话说你需要在每个部分都有正确的声明或者子选项Split ...

无论如何，optionSplit是一个很好但很棘手的技术，它是多年前发明的，当没有任何可靠的JS库时，通过某些因素增加了样式操作的可能性，目前我会使用jQuery和/或新的CSS功能来做这个，只是生成普通菜单，然后将所需的类添加到每个x元素。即：

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.