Уокер с переключателем подменю

Question

Если я хочу, чтобы подобное меню работало, как бы я это сделал с помощью устройства для ходьбы?

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

<nav>
    <ul>
        <li><a href="#">Page 1</a>
            <button class="toggle" onClick="function1()">+</button>
            <ul class="sub-menu">
                <li>Page 1.1</li>
                <li>Page 1.2</li>
            </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a>
            <button class="toggle" onClick="function2()">+</button>
            <ul class="sub-menu">
                <li>Page 3.1</li>
                <li>Page 3.2</li>
            </ul>
        </li>
        <li><a href="#">Page 4</a></li>
    </ul>
</nav>

У меня уже настроено wp_nav_menu:

<?php wp_nav_menu(array(
    'menu'       => 'Main Navigation',
    'container'  => false,
    'items_wrap' => '<ul">%3$s</ul>',
    'walker'     => new my_walker_nav_menu()
));

Конечный результат должен выглядеть примерно так: