Seeking assistance with enhancing the navigation functionality.
How can I ensure that when a user clicks on a menu item, any other open menus are closed and the active class is removed from them?
The current navigation setup meets my requirements except for this specific aspect.
Any guidance or support on this matter would be greatly appreciated.
Thank you!
$(document).ready(function() {
$('.navigationV1 ul.top-level-menu .label').on('click', function() {
// Toggle top nav links
$(this).siblings('.drop-down-menu').slideToggle();
$(this).toggleClass('active');
});
});.active {
background-color: #666;
}
.drop-down-menu {
display: none;
}<div class="navigationV1 top-level-menu label">
<div class="descendant-links-container">
<ul class="top-level-menu">
<li>
<a class="label">Menu 1</a>
<ul class="drop-down-menu">
<li>
<a>Drop-down-menu 1</a>
</li>
</ul>
</li>
<li>
<a class="label">Menu 2</a>
</li>
<li>
<a class="label">Menu 3</a>
<ul class="drop-down-menu">
<li>
<a>Drop-down-menu 2</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>