Wordpress expand подменю при нажатии на родителя

Question

Я делаю тему wordpress, используя _s в качестве основы. Я пытаюсь создать меню. Пока у меня нет никакого особого CSS в меню. Я просмотрел (отзывчивое) меню для темы «Двадцать шестнадцать», и я хочу иметь такое же меню, но только «отзывчивое» меню для небольших экранов. На моем сайте, меню не должно быть отзывчивым, хотя. Меню (на небольших экранах) выглядит так, что это то, что я хочу:

Двадцать Шестнадцать темы демо: https://twentysixteendemo.wordpress.com/ (Вы должны изменить размер на небольшой экран, чтобы увидеть меню я говорю)

Я хочу этот тип меню в основном потому, что он имеет возможность «раскрывать/раскрывать кнопку», которая может отображать суб-контент в меню.

Так что я задаю вопрос: как я могу настроить свое меню так, чтобы оно выглядело как меню темы для мобильных телефонов Twenty Sixteen (mobile/tablet), включая кнопку, которая расширяет подкатегории меню?

Я искал в Интернете несколько дней, не нахожу информацию об этом. Кажется, каждая статья, которая просто решает проблему, - это просто копировать другие полезные статьи.

Это тонированное HTML У меня есть для моего меню прямо сейчас:

<ul id="primary-menu" class="main-menu"><li class="has-children menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1706"><a href="#">Group 1</a> 
<ul class="sub-menu"> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1707"><a href="#">Sub Group 1</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1708"><a href="#">Image</a></li> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1709"><a href="#">Image</a></li> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1710"><a href="#">Image</a></li> 
    </ul> 
</li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1711"><a href="#">Sub Group 2</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1712"><a href="#">Sub Group Level 3</a> 
     <ul class="sub-menu"> 
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1713"><a href="#">Image</a></li> 
      <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1714"><a href="#">Image</a></li> 
     </ul> 
</li> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1715"><a href="#">Image</a></li> 
    </ul> 
</li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1730"><a href="#">Image</a></li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1731"><a href="#">Image</a></li> 
</ul> 
</li> 
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1718"><a href="#">Group 2</a> 
<ul class="sub-menu"> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1719"><a href="#">Image</a></li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1720"><a href="#">Image</a></li> 
</ul> 
</li> 
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1721"><a href="#">Group 3</a> 
<ul class="sub-menu"> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1722"><a href="#">Image</a></li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1723"><a href="#">Image</a></li> 
</ul> 
</li> 
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1724"><a href="#">Group 4</a> 
<ul class="sub-menu"> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1725"><a href="#">Sub Group 3</a> 
    <ul class="sub-menu"> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1726"><a href="#">Image</a></li> 
     <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1727"><a href="#">Image</a></li> 
    </ul> 
</li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1728"><a href="#">Image</a></li> 
    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729"><a href="#">Image</a></li> 
</ul> 
</li> 
</ul> 

Это меню в моем header.php

<div class="menu-container"> 
    <nav id="site-navigation" class="main-navigation" role="navigation"> 
     <?php wp_nav_menu(array(
     'theme_location' => 'primary', 
     'sort_column' => 'menu_order', 
     'menu' => 'Categories', 
     'container_class' => 'main-menu', 
     'menu_id' => 'primary-menu', 
     'menu_class' => 'main-menu' 
     )); ?> 
    </nav><!-- #site-navigation --> 
</div><!-- #menu-container --> 

Что мое меню выглядит следующим образом сейчас:

Answer 1

Вы можете достичь этого с помощью javascript (jquery) или только с помощью css.

Css пример: https://codyhouse.co/gem/css-multi-level-accordion-menu/

JQuery Пример: https://perishablepress.com/jquery-accordion-menu-tutorial/

надеюсь, что это помогает