Javascript - 在子菜单处于活动状态时保持下拉菜单打开

Question

我正在使用 JavaScript 来切换我的下拉菜单。当我点击活动 1 或活动 2 时，我希望模块 1 保持打开状态，但它正在重置为关闭。

这是因为当我单击菜单（活动 1）时，页面会刷新并且菜单会重置以删除我不想要的活动类。 Javascript 有一个切换功能。而在 CSS 中，ul 首先隐藏，当活动类应用为 display: 块时显示。

var $menu = $('#menu'),
  $menu_openers = $menu.children('ul').find('.opener');

// Openers.
$menu_openers.each(function() {
  var $this = $(this);

  $this.on('click', function(event) {

    // Prevent default.
    event.preventDefault();

    // Toggle.
    $menu_openers.not($this).removeClass('active');
    $this.toggleClass('active');

    // Trigger resize (sidebar lock).
    $window.triggerHandler('resize.sidebar-lock');
  });
});

#menu>ul>li>ul {
  display: none;
}

#menu ul a.opener.active+ul,
#menu ul span.opener.active+ul {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
  <ul>
    <li><a href="index.html">Homepage</a></li>
    <li>
      <span class="opener">Module 1</span>
      <ul>
        <li><a href="activity-1.html">Activity 1</a></li>
        <li><a href="activity-2.html">Activity 2</a></li>
      </ul>
    </li>
  </ul>
</nav>