javascript - 两个不同的 Bootstrap 菜单在同一个按钮上折叠

Question

我有一个带有 Bootstrap 3.2 的 Wordpress 站点，我正在尝试使 2 个不同的菜单折叠在同一个 Bootstrap 按钮中，这可能吗？如何？实际上它有两个折叠在不同按钮中的菜单(最上面的一个不工作，不知道为什么)但我希望它们折叠在同一个按钮中。

<header id="main_header" role="banner">
<div class="container">
    <h1 id="logo"><a title="<?php bloginfo('name'); ?>" href="<?php echo home_url(); ?>"></a></h1>

    <div id="topbar" class="row">
        <nav class="navbar navbar-default navbar-right col-md-12 " role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="<?php echo home_url(); ?>">                        
                    </a>
                </div>

                <?php
                wp_nav_menu(array(
                    'menu' => 'primary',
                    'theme_location' => 'primary',
                    'depth' => 2,
                    'container' => 'div',
                    'container_class' => 'collapse navbar-collapse navbar-right',
                    'container_id' => 'topbar',
                    'menu_class' => 'nav navbar-nav',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
                ?>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-12 nopadding">
            <img id="zapatero" src="<?php bloginfo("template_url"); ?>/img/circulo-logo.png" height="160px" class="img-responsive" />
        </div>
    </div>
    <div id="secondmenu" class="row">
        <nav class="navbar navbar-default navbar-right col-md-pull-3 col-md-8 " role="navigation">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                        <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' => 'secondary',
                    'theme_location' => 'secondary',
                    'depth' => 2,
                    'container' => 'div',
                    'container_class' => 'collapse navbar-collapse ',
                    'container_id' => 'bs-example-navbar-collapse-2',
                    'menu_class' => 'nav navbar-nav',
                    'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
                    'walker' => new wp_bootstrap_navwalker())
                );
                ?>
            </div>
        </nav>
        <div id="search" class="col-md-push-8 col-md-3">
            <?php get_search_form(); ?>
        </div>
    </div>
</div>

Answer 1

是的，你可以这样做，只需在你的数据目标属性中使用一个类，并在两个导航上设置这个类。

<button type="button" class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse">

<!-- first navigation -->
<nav class="navbar-collapse collapse">...</nav>
<!-- second navigation -->
<nav class="navbar-collapse collapse">...</nav>