jquery - Bootstrap 3 和 Wordpress 垂直菜单 : keep submenu open when active

Question

我正在使用 Bootstrap 3 开发一个 WordPress 主题。我使用导航栏组件在侧边栏中有一个垂直菜单。我能够使子菜单的菜单像 Accordion 一样，这样当单击父项时，子菜单就会展开。

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

我希望有一种方法可以用 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，通过删除小屏幕代码，使菜单像 Accordion 一样:

/* --------------------------------------------------------------------
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;
}