jQuery Internet Explorer / Edge toggleClass问题

Question

So I made this horizontal menu which has a div slide from underneath it when clicked. Everything works fine, except Internet Explorer and Edge fold out all submenus when any of the items with a submenu is clicked. I have seen that there are can be some compatibility issues with toggle()/toggleClass() but have not found a solution that worked yet. Any ideas?

Js:

 $(document).ready(function (){
        $('.info-menu').click(function(){
            // Append proper class to generic submenu name.
            var menuNumber = this.classList[1];
            var menuToggle = '.top-sub-nav-fixed.' + menuNumber;
            // If other sub menu item is active, toggle active
            $('.top-sub-nav-fixed').each(function (){
               if (typeof this.classList[2] != 'undefined' && this.classList[1] != menuNumber ) {
                   $(this).toggleClass('active');
               }
            });
            // Toggle appropriate menu item
            $(menuToggle).toggleClass('active');
        });
    });

Fiddle here: JSFIddle

Answer 1

The solution was pretty straightforward: instead of using toggleClass() inside of the each() statement using removeClass() did the trick. For some reason IE sets all DIVs to active (as opposed to webkit or gecko based browsers) when using toggleClass() in this function.

$(document).ready(function (){
    $('.info-menu').click(function(){
        // Append proper class to generic submenu name.
        var menuNumber = this.classList[1];
        var menuToggle = '.top-sub-nav-fixed.' + menuNumber;
        // If other sub menu item is active, toggle active
        $('.top-sub-nav-fixed').each(function (){
           if (typeof this.classList[2] != 'undefined' && this.classList[1] != menuNumber ) {
               $(this).removeClass('active');
           }
        });
        // Toggle appropriate menu item
        $(menuToggle).toggleClass('active');
    });
});