Recursive Submenu Opening and Incorrect Active Class Assignment on Right Arrow Key Press

Question

I'm currently working on a web application that has a menu system with submenus. I'm trying to implement arrow key functionality where the right arrow key should open a submenu, and the active class should be assigned to the corresponding link. However, I'm encountering an issue where pressing the right arrow key is opening all submenus recursively and incorrectly assigning the active class to multiple links. I've provided the relevant code below:

$(document).ready(function() {// Other functionality code...
$(document).keydown(function(e) {const activeLink = $('.main-link.active');const submenu = activeLink.next('ul');
    switch (e.which) {
      case 37: // Left arrow
        if (submenu.is(':visible')) {
          submenu.slideUp();
        }
        break;
      case 39: // Right arrow (not working as intended)
        if (!submenu.is(':visible')) {
          submenu.slideDown();
        }
        break;
      case 38: // Up arrow. functionality
        if (activeLink.parent('li').prev('li').length > 0) {
          activeLink.removeClass('active');
          activeLink.parent('li').prev('li').find('.main-link').addClass('active');
        }
        break;
      case 40: // Down arrow functionality
        if (activeLink.parent('li').next('li').length > 0) {
          activeLink.removeClass('active');
          activeLink.parent('li').next('li').find('.main-link').addClass('active');
        }
        break;
    }
      $('.sidebar-toggle').click(function () {
        // Toggle menu-open class
        $('body').toggleClass('menu-open');
        // Toggle title
        if ($('body').hasClass('menu-open')) {
          $(this).prop('title', 'Collapse Menu');
        } else {
          $(this).prop('title', 'Expand Menu');
        }
        // Close all child menus
        $('.treeview-menu').slideUp();
      });
  
      // Handle menu item clicks
      $('.main-link').on('click', function (event) {
        const clickedLink = $(this);
        const isActive = clickedLink.hasClass('active');
  
        // Remove active class from other items
        $('.main-link.active').removeClass('active');
  
        if (!isActive) {
          // Toggle current item
          clickedLink.addClass('active');
        }
  
        // SlideToggle and SlideUp for submenus
        clickedLink.next('ul').slideToggle();
        clickedLink.parent('li').siblings('li').find('ul').slideUp();
      });
});

When I press the right arrow key, instead of just opening the submenu associated with the active link, it's opening all submenus recursively and assigning the active class to multiple links. I tried many. different solutions and even

activeSubMenu.find('.main-link:first').addClass('active');

does not seem to work. I'm not sure what's causing this behavior. Could anyone help me identify the issue and provide a solution to achieve the desired functionality? Any suggestions or insights would be greatly appreciated!

edit: Here is the HTML code associated with this. I forgot to add it in the post here:




    
    
    
    Navigation Menu


    
        
            
                
                Warehousing
                
                    
                
            
            
                
                    
                        Setup
                        
                            
                        
                    
                    
                        
                            Division
                        
                        
                            Branch/Plant
                        
                        
                            Warehouses & Stores
                        
                        
                            Inventory Types
                        
                        
                            Container Type
                        
                        
                            Location Type
                        
                        
                            Location Level
                        
                        
                            Operation Codes
                        
                        
                            Resources
                        
                        
                            Company Calendar
                        
                        
                            Purchase Exception
                        
                        
                            Warehouse Location
                        
                    
                
            
        
        
        
            
                
                Inventory
                
                    
                
            
            
                
                    Stock Levels
                
                
                    Audit Trail
                
                
                    Reports

Recursive Submenu Opening and Incorrect Active Class Assignment on Right Arrow Key Press

Answers (0)

Related Questions