使用TypoScript創建手風琴菜單

Question

昨天和今天，我在弄清楚如何使用TYPO3 7.6中的bootstrap css和TypoScript創建手風琴菜單時玩得很開心。

由於我幾乎迷失了方向並向大腦提出了疑問，因此我一直在尋找一個好的解決方案。

編輯：將解決方案移至自己的答案，並更改主題開始提問

Answer 1

也許您可以使用流暢的菜單渲染。 這里有些例子：

https://github.com/TYPO3/TYPO3.CMS/tree/master/typo3/sysext/fluid_styled_content/Resources/Private/Partials/Menu

Answer 2

昨天和今天，我在弄清楚如何使用TYPO3 7.6中的bootstrap css和TypoScript創建手風琴菜單時玩得很開心。

由於我幾乎迷失了方向並向大腦提出了疑問，因此我想與大家分享我的成果，並希望獲得一些改進的想法。

我有一個2級菜單，其中第一級僅用於分組-不可鏈接-第二級包含子頁面

這是模板中的HTML容器：

# HTML part, put into your template
<div class="panel-group" id="accordion">
    <f:cObject typoscriptObjectPath="lib.menu2" />
</div>

這是我的TypoScript：

# TypoScript part
lib.menu2 = HMENU
lib.menu2 {
  wrap = |

  1 = TMENU
  1.expAll = 1

  1.NO = 1
  1.NO.wrapItemAndSub = <div class="panel panel-default">| </table></div></div></div>
  1.NO.doNotLinkIt = 1
  1.NO.allStdWrap.dataWrap =  <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">

  1.IFSUB < .1.NO
  1.IFSUB.allStdWrap.dataWrap =  <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse"><div class="panel-body"><table class="table">

  1.CURIFSUB < .1.NO
  1.CURIFSUB.allStdWrap.dataWrap =  <div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse{field:uid}"> | </a></h4></div><div id="collapse{field:uid}" class="panel-collapse collapse in"><div class="panel-body"><table class="table">
  1.ACTIFSUB< .1.CURIFSUB

  2 = TMENU
  2.NO = 1
  2.NO.linkWrap = <tr><td> | </td></tr>
}

我仍然在待辦事項列表上進行少量清理，刪除沒有子菜單的子菜單。

你怎么看？

Answer 3

@ firegate666，您的解決方案令人鼓舞！ 我已經修改為考慮以下內容：-子部分（注意：也可以使用流暢，只需更改### SUBPART ###）-用戶生成的完整CSS樣式（無面板）-（最低）3級菜單

HTML模板：

 <!-- ###MENU### START -->

 <!-- ###MENU### END -->

打字稿：

# declare the menu,
# wrap it in a list <ul>
# and then wrap all that in a container div (for post-processing menus like slicknav),
subparts.MENU = HMENU
subparts.MENU.wrap = <div id="menu"><ul> | </ul></div>
subparts.MENU {

    # 1st level
    1 = TMENU
    1 {

      expAll = 1

      # enable the NOrmal state, wrap it in a <li>
      NO = 1
      NO.wrapItemAndSub = <li> | </li>


      # IF item has a SUBmenu, then it's still like a NOrmal item, but more
      # wrap it in Bootstrap accordion/collapse functionality
      # then close it
      IFSUB < .NO
      IFSUB = 1  
      IFSUB.allStdWrap.dataWrap (
        <a class="accordion-toggle collapsed" data-toggle="collapse" href="#collapse{field:uid}"> | </a>
        <div id="collapse{field:uid}" class="collapse">
          <ul>
      )
      IFSUB.wrapItemAndSub (
            <li> | </li>
          </ul>
        </div>
      )
      IFSUB.doNotLinkIt = 1

    }

    # 2nd level sub-menu and 3rd level sub-sub-menu inherit all the properties of 1st level
    2 < .1
    3 < .1


# end subparts.MENU
}

...和（建議）CSS：

.accordion-toggle:before {
  content: "- ";
}
.accordion-toggle.collapsed:before {
  content: "+ ";
}

我希望對您的代碼的補充對您有所幫助:-)