<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 & 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 & 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个。
答案 0 :(得分:2)
Read the docs它提供了很多线索,optionSplit
的有效语法是:
first-element(s) |*| middle-element(s) |*| last-element(s)
last
,first
,middle
,这意味着如果您有一个项目,则只会使用last
段,first, last
first, middle(s), last
每个细分可以包含编号的子细分除以||
。
您只在中间部分使用带编号的子分段,您需要修复它。
另外一点是,选项Split必须在所有情况下都有效,当只有1,2或3个项目可用时,你使用它的方式会导致有ul
未封闭的情况,换句话说就是你在 optionSplit的部分或子部分需要正确的声明...
无论如何,optionSplit
是一个不错但技巧娴熟的技术,它是多年前发明的,当没有任何可靠的JS库时,通过某种因素增加了样式操作的可能性,目前我会使用jQuery和/或新的CSS功能来执行此操作,只需生成普通菜单,然后将所需的类添加到每个x元素。即: