两个不同的引导菜单在同一个按钮上折叠

Posted 2023-05-08

【中文标题】两个不同的引导菜单在同一个按钮上折叠

【英文标题】：Two different bootstrap menu collapse on same button

【发布时间】：2014-10-09 05:14:14

【问题描述】：

我有一个带有 Bootstrap 3.2 的 Wordpress 网站，我正在尝试让 2 个不同的菜单折叠在同一个引导按钮中，这可行吗？如何？实际上它有两个折叠在不同按钮中的菜单（最上面的一个不起作用，不知道为什么），但我希望它们折叠在同一个按钮中。

<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"  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>

【参考方案1】：

是的，您可以这样做，只需在您的 data-target 属性中使用一个类并在两个导航上都设置这个类。

<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>

【讨论】：

感谢这个清晰而简单的答案。我已经这样做了，但是我的第二个菜单没有出现在下拉菜单中。还有其他要求吗？

【参考方案2】：

你的一个菜单应该是这样的，遵循结构ok

<nav class="navbar navbar-default" 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(); ?>">
                <?php bloginfo('name'); ?>
            </a>
    </div>

        <?php
            wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
        'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>
    </div>
</nav>
<!--this is a primary menu -->

二级应该是这样的

<nav role="navigation" class="navbar navbar-default navbar-static-top">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!--<a href="#" class="navbar-brand">Logo</a>-->
                <a class="bgc hdr_hic" title="./" href="./">&nbsp;</a>
            </div>
            <!-- Collection of nav links, forms, and other content for toggling -->
            <div id="navbarCollapse" class="collapse navbar-collapse">
          <?php
                wp_nav_menu( array(
                    'menu'              => 'secondary',
                    'theme_location'    => 'secondary',
                    'depth'             => 2,
                    'container'         => true,
                    'container_class'   => 'collapse navbar-collapse',
            'container_id'      => 'bs-example-navbar-collapse-1',
                    'menu_class'        => 'nav navbar-nav',
                    'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                    'walker'            => new wp_bootstrap_navwalker())
                );
            ?>        <!--<form role="search" class="navbar-form navbar-left">
                    <div class="form-group">
                        <!--<input type="text" placeholder="Search" class="form-control">-->

                        <!--<div class="search-toggle">-->
                    <!--<a href="#search-container" class="screen-reader-text" aria-expanded="false" aria-controls="search-container"><?php //_e( 'Search', 'twentyfourteen' ); ?></a>-->
                       <!--</div>-->
                    <!--</div>-->
               <!--</form>-->

            </div>
        </nav>
    <!-- its a secondary menu -->

使用这个我希望你的两个菜单都能工作..！