多级手风琴菜单

Question

我正试图为这个项目制作一个多级手风琴菜单。我的手风琴菜单适用于1级，但2级不能工作(ex.Project信息>关键文档)。从WordPress菜单生成的HTML代码您可以在这里查看现场演示

https://codepen.io/pagol/pen/qgbXGy

请将输出窗口调整为移动大小。\

我认为需要调整一下我的javascript。贝娄是我的剧本

var accordion_head = $('.accordion li > a, .accordion li > li > a'),
        accordion_body = $('.accordion li > .sub-menu, .accordion li > li > .sub-menu');

    // Open the first tab on load

    //accordion_head.first().addClass('active').next().slideDown('normal');

    // Click function

    accordion_head.on('click', function(event) {

        // Disable header links

        //event.preventDefault();

        // Show and hide the tabs on click

        if ($(this).attr('class') != 'active'){
            accordion_body.slideUp('normal');
            $(this).next().stop(true,true).slideToggle('normal');
            accordion_head.removeClass('active');
            $(this).addClass('active');
        }

    });

我主要想创建WordPress菜单，在桌面上它会显示水平菜单和移动菜单，它会显示手风琴菜单。我尝试了很多方法，但都失败了，然后我使用了两个菜单标记，一个用于移动，一个用于我的桌面。如果你们知道任何菜单单标记可以解决我的目的，那么也可以。

Answer 1

我们可以使用媒体查询触发桌面导航，并将其放在移动设备上。您可以清理CSS以容纳此工作版本，但如下所示：https://codepen.io/anon/pen/PVZabq

在移动平台上，桌面导航消失，移动导航出现。当伸展回桌面，移动导航消失，桌面菜单显示。

以下是添加的比特：

<div class="desktop-nav">
  <ul class="accordion">
    <li><a href="#">Home</a></li>
        <li class="link"><a href="#">Project Information</a>
          <ul class="sub-menu">
            <li><a href="#key-results">Key Results</a></li>
            <li><a href="#partners">Partner NGOs</a></li>
            <li class="link"><a href="#">Key Documents</a>
              <ul class="sub-menu">
                <li><a href="#key-documents/legal-framework">Legal framework</a></li>
                <li><a href="#key-documents/project-document">Project Document</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li><a href="#./news-events">News</a></li>
        <li><a href="#working-areas">Working Areas</a></li>
        <li class="link"><a href="#"> Performance</a>
          <ul class="sub-menu">
            <li><a href="#./success-story">Success Story</a></li>
            <li><a href="#case-statistics">Case Statistics</a></li>
            <li><a href="#voices-of-the-field">Voices from the Field</a></li>
          </ul>
  </ul>
</div>

CSS

.desktop-nav,
.desktop-nav ul{
  width:100%;
  display:inline;
}

.desktop-nav ul li{
  float:left;
  min-width:200px; /*Can be anything change your CSS to make how you want, demo purposes */
}

@media only screen and (max-width: 600px) {

.desktop-nav,
.desktop-nav ul{
  display:none; <!-- Hide on screens smaller than 600px -->
}