Bootstrap 3& Wordpress垂直菜单:激活时保持子菜单打开

Question

我正在开发一个WordPress主题与Bootstrap 3。我有一个垂直的菜单在侧边栏使用导航栏组件。我可以将菜单做成类似于子菜单的折叠式菜单，这样当单击父项时，子菜单就会展开。

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

我希望有一种方法可以用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;
}