Keep parent menu toggle Jquery - html

Question

Hello I need to keep parent menu open when a corresponding submenu has been selected.
I have the following code for the menu
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');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>
<span class="opener">Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
<li>
<span class="opener">Another Submenu</span>
<ul>
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
</ul>
</nav>
How I could achieve to keep it open base on selection?
thank you!

Answer 1

$('.opener').on('click', function(event) {
$(this).next().toggleClass('active');
});
#menu ul li ul
{
display:none;
}
.active{
display:block !important;
}
.opener{
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<nav id="menu">
<ul>
<li>
<span class="opener">Submenu</span>
<ul class="submenu deactive">
<li>Lorem Dolor1</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
<li>
<span class="opener">Another Submenu</span>
<ul class="submenu deactive">
<li>Lorem Dolor</li>
<li>Ipsum Adipiscing</li>
<li>Tempus Magna</li>
<li>Feugiat Veroeros</li>
</ul>
</li>
</ul>
</nav>