时间戳

首页 > 解决方案 > 为什么下拉菜单有这个包装问题？

drop-down-menu - 为什么下拉菜单有这个包装问题？

问题描述

我的下拉菜单有一个小错误：lis 组需要用 a 包裹ul，但现在每个单曲li都有一个ul包裹。

排版是：

subparts.BREADCRUMBNAV-INTERACTIVE1 = HMENU
subparts.BREADCRUMBNAV-INTERACTIVE1.special = directory
subparts.BREADCRUMBNAV-INTERACTIVE1.special.value.data = leveluid:1
subparts.BREADCRUMBNAV-INTERACTIVE1.wrap = <div class="breadcrumb-nav1">|</div>
subparts.BREADCRUMBNAV-INTERACTIVE1.1 = TMENU
subparts.BREADCRUMBNAV-INTERACTIVE1.1 {
  expAll = 1
  noBlur = 1   
  NO.wrapItemAndSub = <ul class="dropdown">|</ul>
  NO.allWrap = <li class="dropdown-item1">|</li>
  ACT = 1
  ACT.allWrap = |
  ACT.ATagParams = class="btn btn-secondary clickme1" style="order:-1;"
}

输出是：

<div class="breadcrumb-nav1">

  <a href="frances.html" class="btn btn-secondary clickme1" style="order:-1;">Francés</a>

  <ul class="dropdown">
    <li class="dropdown-item1"><a href="ingles.html">Inglés</a></li>
  </ul>

  <ul class="dropdown">
    <li class="dropdown-item1"><a href="aleman.html">Alemán</a></li>
  </ul>

  <ul class="dropdown">
    <li class="dropdown-item1"><a href="italiano.html">Italiano</a></li>
  </ul>

</div>

但输出应该是：

<div class="breadcrumb-nav1">

  <a href="frances.html" class="btn btn-secondary clickme1" style="order:-1;">Francés</a>

  <ul class="dropdown">
    <li class="dropdown-item1"><a href="ingles.html">Inglés</a></li>
    <li class="dropdown-item1"><a href="aleman.html">Alemán</a></li>
    <li class="dropdown-item1"><a href="italiano.html">Italiano</a></li>
  </ul>

</div>

标签： drop-down-menutypo3

解决方案

这是一种解决方法或更简单的答案，但在某些情况下它可能很有用。要获得 100% 解决问题的解决方案，请查看我在此页面上的第二个答案。
关于包装你的挑战有点困难，但不是在 TypoScript 层面解决你的问题，主要我认为它已经在 CSS 层面解决了。
因此，您永远不需要所需的结构，而是可以依靠CSS 属性order来获取顶部显示的当前语言。
详细地说，这意味着您的菜单结构可能如下所示：

<div class="breadcrumb-nav1">
    <ul class="dropdown">
        <li class="dropdown-item1"><a href="ingles.html">Inglés</a></li>
        <li class="btn btn-secondary clickme1" style="order:-1;"><a href="frances.html" >Francés</a></li>
        <li class="dropdown-item1"><a href="aleman.html">Alemán</a></li>
        <li class="dropdown-item1"><a href="italiano.html">Italiano</a></li>
    </ul>
</div>

剩下的就是一个简单的任务，您不必对 TypoScript 考虑太多：

subparts.BREADCRUMBNAV-INTERACTIVE1 = HMENU
subparts.BREADCRUMBNAV-INTERACTIVE1.special = directory
subparts.BREADCRUMBNAV-INTERACTIVE1.special.value.data = leveluid:1
subparts.BREADCRUMBNAV-INTERACTIVE1.wrap = <div class="breadcrumb-nav1">|</div>
subparts.BREADCRUMBNAV-INTERACTIVE1.1 = TMENU
subparts.BREADCRUMBNAV-INTERACTIVE1.1 {
  expAll = 1
  noBlur = 1   
  wrap = <ul class="dropdown">|</ul>
  NO.linkWrap = <li class="dropdown-item1">|</li>
  ACT = 1
  ACT.linkWrap = <li class="btn btn-secondary clickme1" style="order:-1;">|</li>
}

你现在仍然可以像这样简化它，结果应该和上面一样：

subparts.BREADCRUMBNAV-INTERACTIVE1 = HMENU
subparts.BREADCRUMBNAV-INTERACTIVE1.special = directory
subparts.BREADCRUMBNAV-INTERACTIVE1.special.value.data = leveluid:1
subparts.BREADCRUMBNAV-INTERACTIVE1.wrap = <div class="breadcrumb-nav1"><ul class="dropdown">|</ul></div>
subparts.BREADCRUMBNAV-INTERACTIVE1.1 = TMENU
subparts.BREADCRUMBNAV-INTERACTIVE1.1 {
  expAll = 1
  noBlur = 1   
  NO.linkWrap = <li class="dropdown-item1">|</li>
  ACT = 1
  ACT.linkWrap = <li class="btn btn-secondary clickme1" style="order:-1;">|</li>
}

对于您可以用于每个链接的所有包装，这里仍然是参考，尽管您可能永远不需要它。

我还说的另一件事是，您似乎使用目录来分隔语言。如果您使用在每个页面上使用翻译的方法，您可以使用这里描述的 TYPO3 的通用语言菜单，通常您可能只需要替换关键字directoryby language。

推荐阅读