如何将主要和次要引导 wp 菜单合并为一个用于移动设备答案

【问题标题】：How merge primary and secondary bootstrap wp menu into one for mobile device如何将主要和次要引导 wp 菜单合并为一个用于移动设备
【发布时间】：2019-03-14 19:04:17
【问题描述】：

当我点击切换按钮时，我在标题和移动设备上有两个菜单，两个菜单出现，但一个菜单出现在顶部。我想在点击切换按钮时将这两个菜单合并到一个上，并希望同时看到这两个菜单菜单一次。我检查了这个主题Combining multiple Bootstrap menus into one for mobile?，但对我不起作用

<nav class="topmenu">
    <?php
        wp_nav_menu( array('menu' => 'top-menu','theme_location'=> 'topmenu','depth'=> 2,'container'=> 'div','container_class'=> 'collapse navbar-collapse navbar-ex1-collapse','fallback_cb'=>'wp_bootstrap_navwalker::fallback','walker'=> new wp_bootstrap_navwalker()));
    ?>
</nav>



<nav class="mainmenu">
    <!-- Brand and toggle get grouped for better mobile display -->
        <div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <?php
                wp_nav_menu( array('menu' => 'main-menu','theme_location'=> 'main-menu','depth'=> 2,'container'=> 'div','container_class' => 'collapse navbar-collapse navbar-ex1-collapse', 'fallback_cb'=> 'wp_bootstrap_navwalker::fallback','walker' => new wp_bootstrap_navwalker()));
            ?>
       </div>
</nav>

【问题讨论】：

标签： html css twitter-bootstrap-3

【解决方案1】：

对于那些有这个问题的人，我无法通过引导更改来解决它，但使用一个简单的 jQuery 代码就解决了。单击切换按钮时，您只需将第一个导航元素移动到另一个导航元素

$(function() {
        $(".navbar-toggle").click(
            function(){ $(".topmenu").appendTo(".mainmenu"); }
        );
    });

【讨论】：