Question

我正在使用Bootstrap 3开发一个WordPress主题。我在侧栏中使用导航栏组件有一个垂直菜单。我能够为子菜单制作菜单式手风琴，以便在单击父项时，子菜单会展开。

我的问题：当其中一个页面处于活动状态时，如何使该子菜单保持打开状态？

我希望有一种方法可以使用CSS，因为我对jquery一无所知。

我想我已经阅读了与此问题相关的所有其他帖子并尝试了代码建议，但我无法正常工作或弄清楚如何正确应用它来解决我的问题。过去两天我也在互联网上搜索无济于事。我现在正在远程工作，但如果有帮助，可能会在下周运行该网站。

这是我的菜单代码：

    <nav class="navbar navbar-default" role="navigation">

    <div class="navbar-header">

    <!-- Mobile Navigation -->
    <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>               
     </div>

     <!-- Collect the nav links, forms, and other content for toggling -->

        <?php 
            wp_nav_menu( array(
            'menu'            => 'main-nav',
            '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()
            ) );
        ?>
    </nav>

这是我一直在努力的CSS。我修改了bootstrap.css，通过删除小屏幕的代码让菜单像手风琴一样：

/* --------------------------------------------------------------------
Making the submenu stay open when clicked
------------------------------------------------------------------- */
.navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu > li > a {
    line-height: 21px;
}
.navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-nav .open .dropdown-menu > li > a:focus {
    background-image: none;
}
/* --------------------------------------------------------------------
  Makes the navbar a verticle menu 
 ------------------------------------------------------------------- */
.navbar .nav > li {
    float: none;
    width: 200px;
    min-width: 125px;
}
.navbar .nav > li a {
    padding: 10px 0 10px 15px;
}

谢谢！

Answer 1

我用过它，效果很好！

 .current_page_ancestor > .dropdown-menu {
    display: block;
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

Bootstrap 3＆amp; Wordpress垂直菜单：活动时保持子菜单打开

1 个答案: