javascript - 项目处于活动状态时如何保持子菜单打开

Question

我有一个侧边栏导航菜单。我对它的工作方式感到满意，但是我想在菜单项处于活动状态后保持子菜单打开，因此当所选链接打开时，父/子会突出显示并且子菜单保持打开状态。目前它保持突出显示，但菜单关闭。

Jsfiddle在这里： https ://jsfiddle.net/3q56nxth/1/#&togetherjs=eEoC5Iby2b

        function removeExtraUrl(){
            setTimeout(function () {
                window.history.pushState('page', 'Title', '/new-knowledge');
            }, 100);
        }
        
        function smoothScroll(targetID, offSet=0){
            var element=document.getElementById(targetID);
            var duration=300;
            zenscroll.center(element,duration,offSet);
            removeExtraUrl();
        }


        $(function() {
          $('.sidebar-container a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
        });
            li.sidebar-item{
         list-style-type: none;
         text-align: left;
         padding-top: 5%;
         padding-bottom: 20px;
         max-width: 950px;
      margin-left: auto;
      margin-right: auto;

    }


    .sidebar-container li:hover .article-sub__sidebar {
      display: block;
      max-height: 200px;
    }


    .article-sub__sidebar {
      overflow: hidden;
      max-height: 0;
      -webkit-transition: all 0.5s ease-out;
    }

         ul.quick-links-hero{
            display:none;}
        
            .sidebar-item>a{   
        text-decoration:none;
        font-family: 'Montserrat', sans-serif;
        font-size: 16px;
        line-height: 26px;
        font-weight: 500;
        color: #5f6d7a;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 0;
        position: relative; 
        }
        

         .sidebar-item>a:hover{
             background: -webkit-linear-gradient(#6F3E9E,#C9249E);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;}


    .sidebar-container{
        display:block !important;
         -webkit-box-shadow: 0 6px 25px 6px rgba(0, 0, 0, 0.08);
              box-shadow: 0 6px 25px 6px rgba(0, 0, 0, 0.08);
      -webkit-border-radius: 12px;
              border-radius: 12px;
      text-align: center;
      padding: 40px;
      -webkit-transition: all 200ms ease-in-out;
      -o-transition: all 200ms ease-in-out;
      transition: all 200ms ease-in-out;
      background-color: #FFFFFF;
      overflow: hidden; 
        width:20%;
        position: fixed;
        z-index: 2;

    }
    <header class="header--natural">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

        </header>
        <section>
            <div id="article-sidemenu">
            <div class="sidebar-container">
                <ul>
        <li class="sidebar-item"><a href="#">on-page link </a></li>
        <li class="sidebar-item"><a href="/blog-template">Blog Template</a></li>
        <li class="sidebar-item"><a  href="">Knowledge Base</a>
          <ul class="article-sub__sidebar">
            <li class="sidebar-item"><a  href="">Sub Heading</a></li>
            <li class="sidebar-item"><a  href="/blog-template">Sub Heading</a></li>
            <li class="sidebar-item"><a  href="">Sub Heading</a></li>
          </ul>
        </li>
        <li class="sidebar-item"><a  href="#">Contact us</a></li>
      </ul>
        
    </div>
    </div>
    </section>

标签： javascriptcsssubmenuside-menu