尋找符合我需求的Wordpress手風琴菜單

Question

我搜索了一段時間，並沒有找到符合我所有標準的任何東西。

這裏就是我在尋找確切：把在WordPress的側邊欄小工具

• 的手風琴式菜單。
• 該插件必須能夠從特定的Wordpress菜單自動生成菜單。
• 菜單中必須至少有三個級別（見下圖）。
• 使用必須能夠同時展開子菜單和單擊名稱以轉到該頁面（請參閱圖像打擊）。
• 菜單始終保持對用戶所在的子頁面開放。

這與插件的外觀完全無關，我將自己重新設計CSS。只要插件滿足所有這些功能要求即可。

Answer 1

使用此HTML

<div id="MainMenu"> 
     <div class="list-group panel"> 
      <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a> 
      <div class="collapse" id="demo3"> 
      <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a> 
      <div class="collapse list-group-submenu" id="SubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a> 
       <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a> 
       <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a> 
       </div> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a> 
      </div> 
      <a href="javascript:;" class="list-group-item">Subitem 2</a> 
      <a href="javascript:;" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> 
      <div class="collapse" id="demo4"> 
      <a href="" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a> 
      <div class="collapse" id="demo5"> 
      <a href="#" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
     </div> 
     </div> 

中的header.php

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
<script type='text/javascript' src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> 

引導JS文件和樣式

<style type="text/css"> 
      .list-group.panel > .list-group-item { 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px 
} 
.list-group-submenu { 
    margin-left:20px; 
} 
     </style>