php - 单击父项时 Wordpress 展开子菜单

Question

我正在使用 _s 作为基础制作一个 wordpress 主题。我正在尝试设置菜单样式。到目前为止，我的菜单上没有任何特定的 CSS。我查看了二十十六主题的(响应式)菜单，我想要相同的菜单，但只有较小屏幕的“响应式”菜单。在我的网站上，菜单不一定要响应。菜单(在较小的屏幕上)看起来像这样，这就是我想要的:

二十六主题演示:https://twentysixteendemo.wordpress.com/ (你必须调整到小屏幕才能看到我说的菜单)

我想要那种类型的菜单主要是因为它具有“展开/下拉按钮”的功能，可以在菜单中显示子内容。

所以我的问题是:如何设计我的菜单样式，使其看起来像 Twenty Sixteen 主题的(手机/平板电脑)菜单，包括展开菜单子(monad)类别的按钮？

我在网上搜索了好几天都没有找到这方面的信息。似乎每篇仅解决该问题的文章都只是其他解释不当的文章的复制粘贴。

这是我现在为我的菜单呈现的 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/

希望对你有帮助