Question

我有一个带有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" 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>

Answer 2

嗨其中一个菜单应该像这样按照结构确定

http://hostname/func?param1=<xxx>&param2=<yyy>

，辅助应该是这样的

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

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

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

2 个答案: