Şu JS Kodu Neden Çalışmıyor Olabilir, Basit Bir Sorun Var Gibi?

querySelector ile aldığınız için bir tanesini alıyorsunuz. querySelectorAll kullanırsanız tümünü dizi olarak alırsınız.
querySelectorAll kullandığınızda bir array elde edeceksiniz, fonksiyonu bu diziye uygulayarak tümünde çalışmasını sağlayabilirsiniz.

Örnek;

let items = document.querySelectorAll(".custom-class");
    items.forEach(element => {
        element.addEventListener('click', () => {
            element.classList.toggle("additional-class")
        });
    });

Örneği kendinize göre uyarlayarak kullanabilirsiniz. jQuery kullanmak isterseniz mantık yine aynı.

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' )
    });
});

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' )
    });
});