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

我正在使用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;
}

谢谢！