Многоуровневое Аккордеонное Меню - PullRequest
Новая
       6

Многоуровневое Аккордеонное Меню

0 голосов
/ 26 января 2019

Я пытаюсь сделать многоуровневое аккордеонное меню для проекта. Мое меню аккордеона работает для 1-го уровня, но 2-х уровней не работает (например, Информация о проекте> Ключевые документы). HTML-код, сгенерированный из меню WordPress. Вы можете посмотреть живую демонстрацию здесь

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, на рабочем столе будет отображаться горизонтальное меню, а на мобильном - меню аккордеона. Я пробовал много способов, но потерпел неудачу, затем я использовал две разметки меню, одну для мобильных устройств и одну для настольного компьютера. Если вы, ребята, знаете какую-либо единственную разметку меню, которая может решить мою задачу, то тоже хорошо

1 Ответ

0 голосов
/ 26 января 2019

Мы можем использовать медиа-запросы для запуска навигации на рабочем столе и убрать ее на мобильный.Вы можете очистить свой 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 -->
}
...