I am trying to keep the submenu open when opening another submenu.
Currently, my code closes all previously opened submenus when trying to open another one.
<li class="">
<a class='parent-link'>
<span class="fa-stack pull-left">
<i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
</span>
<span class="me-2 d-flex align-items-center justify-content-between">
Data<i class="fa-solid fa-angle-down"></i>
</span>
</a>
<ul class="submenu planner-submenu-sidebar list-unstyled">
<li class="nav-item {{ request()->routeIs('home*') ? 'current-menu-highlight' : '' }}">
<a href="{{ route('home') }}" class='child-link'>
<span class="fa-stack pull-left invisible">
<i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
</span>
<span>Item1</span>
</a>
</li>
<li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
<a href="#" class='child-link'>
<span class="fa-stack pull-left invisible">
<i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
</span>
<span>Item2</span>
</a>
</li>
</ul>
</li>
<li class="">
<a class='parent-link'>
<span class="fa-stack pull-left">
<i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
</span>
<span class="me-2 d-flex align-items-center justify-content-between">
Account<i class="fa-solid fa-angle-down"></i>
</span>
</a>
<ul class="submenu planner-submenu-sidebar list-unstyled">
<li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
<a href="#" class='child-link'>
<span class="fa-stack pull-left invisible">
<i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
</span>
<span>Item1</span>
</a>
</li>
<li class="nav-item {{ request()->routeIs('ff') ? 'current-menu-highlight' : '' }}">
<a href="#" class='child-link'>
<span class="fa-stack pull-left invisible">
<i class="fa fa-light fa-gauge-high fa-stack-1x "></i>
</span>
<span>Item2</span>
</a>
</li>
</ul>
</li>
<script>
//Close submenu when opening another one
$(document).ready(function() {
$('.parent-link').click(function(e) {
e.preventDefault();
var submenu = $(this).siblings('.submenu');
if (submenu.hasClass('open')) {
submenu.removeClass('open').slideUp();
} else {
$('.submenu.open').removeClass('open').slideUp();
submenu.addClass('open').slideDown();
}
});
var currentRoute = "{{ Request::url() }}";
$('.child-link').each(function() {
if ($(this).attr('href') === currentRoute) {
$(this).addClass('active');
$(this).closest('.submenu').addClass('open').slideDown();
$(this).closest('.nav-item').find('.parent-link').addClass('active');
}
});
});
</script>
<style>
.submenu {
display: none;
}
.submenu.active {
display: block;
}
.submenu.open {
display: block;
}
</style>
Right now, my code closes any previously open submenus whenever I try to open another one. I want each submenu to stay open when I click its parent item, and close only when clicking it's parent item. How can I achieve this?
