مشکل در jquery

سلام و خسته نباشید به همه بزرگان و دوستان گرامی.
من تازه کارم و تازه دارم jquery یاد میگیرم یک مشکلی دارم.
من یک ul دارم که مثال 5 عدد li دارد.
و این li یک عدد ul دارد، که تعداد ul در هر li فقط یکی است.
تعداد li در هر ul شاید یکی و شاید 15 عدد باشد.
ulوli اولیه که نمایش داده میشه ولی ul زیر مجموعه li پنهان است وقرار است که با کلیک بر روی li این ul زیر مجموعه پدیدار بشه.
و من یک کدی دارم که فقط داره ul اولی رو نشون میده و باقی ul هارو نه، یعنی مثال من ستا li دارم که در همه این ستا یک ul است، با کلیک روی li
اول ul پدیدار میشه و با کلیک مجدد بسته تا اینجا درسته.
ولی روی دوتا دیگه کار نمیکنه، و زمانی که li اول و ul زیرمجموعش رو پاک میکنم بعدی کار میکنه، کد رو میزارم عزیزان لطف کنید مشکلم رو بگید تا بهتر یاد بگیرم.

const openUl = $.querySelector('.navlist ul li ul');
    let boolUl = true;
    document.querySelector(".navlist ul li").onclick = function(){
        if (boolUl === true){
            openUl.classList.add('openUlList');
            boolUl = false;
        }else {
            openUl.classList.remove('openUlList');
            boolUl = true;
        }
    }