Question

我正在尝试为该项目制作多层次手风琴菜单。我的手风琴菜单可用于1级，但2级不可用（例如，“项目信息”>“关键文档”）。从WordPress菜单生成的HTML代码，您可以在此处查看实时演示

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

我认为需要稍微调整一下我的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

在移动设备上，桌面导航消失，并且出现移动导航。回到桌面后，移动导航消失，并显示桌面菜单。

这是添加的位：

HTML

<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 -->
}

多层次手风琴菜单

1 个答案: