Açıklama için teşekkür ederim hocam, çok iyi anladım oradaki mantığı. Şu an dediğinizi uyguladım ve hepsinin ayrı ayrı çalışmasını sağladım. Artık hangisine tıklarsam ona ekleme yapıyor. Peki şu altındaki ".sub-menu"'ye eklemesin nasıl olacak? Onuda querySelectorAll ile array olarak alıp İç içe geçmiş 2 tane forEach mi kullanmalıyım onun için? Denedim ama yanlış yaptığımdan çeşitli hatalar aldım.

Şu an kod şu şekilde:

let submenu = document.querySelectorAll(".menu-item-has-children");
submenu.forEach(element => {
    element.addEventListener('click', () => {
        element.classList.toggle( 'active' )
    });
});

.sub-menu için ekleme yaptığımda hangi .menu-item-has-children tıklanırsa tıklansın ilkinin altındaki .sub-menu için çalışıyor.

let submenu = document.querySelectorAll(".menu-item-has-children");
var addsubmenu = document.querySelector('.sub-menu');
submenu.forEach(element => {
    element.addEventListener('click', () => {
        addsubmenu.classList.toggle( 'active' )
    });
});