e.target.closest() nie wyszukuje mi najbliższej klasy a w konsoli zwraca wartość NULL. Jak to naprawić?

Question

const postMenuBtns = document.querySelectorAll('.postMenuBtn')
const postMenuLists = document.querySelectorAll('.postMenuList')



const postMenuToggle = (e) => {
    // console.log(e.target);
    e.target.style.color = "red"

    const closestMenuList = e.target.closest('.postMenuList')
    console.log(closestMenuList)

    // .classlist.toggle("hideMenu")
}



for(const postMenuBtn of postMenuBtns){
    postMenuBtn.addEventListener('click', postMenuToggle)
}

                <div class="postMenu">
                    <button class="postMenuBtn">
                        <i class="fa-solid fa-ellipsis"></i>
                    </button>

                    <div class="postMenuList hideMenu">
                        <ul>
                            <li>
                                <button><i class="fa-solid fa-caret-right"></i>Usuń post</button>
                            </li>
                            <li>
                                <button><i class="fa-solid fa-caret-right"></i>Edytuj</button>
                            </li>
                        </ul>
                    </div>
                </div>

 

Answer 1

Bo closest() szuka w górę drzewa (czyli sprawdzi kliknięty element, jego rodzica, rodzica jego rodzica itd.), a tutaj menu jest "w bok".

Jeśli wiesz, że struktura się nie zmieni, to można pobrać menu przy pomocy nextElementSibling. A przy wykorzystaniu closest() można by pobrać całe .postMenu i w nim wyszukać .postMenuList.

Comments

pobrałem menu przy użyciu 

    const closestMenuList = e.target.closest('.postMenu').querySelector('.postMenuList')

    closestMenuList.classlist.toggle("hideMenu")

jednak próbując togglować mu klasę hideMenu w konsoli zwraca mi błąd
"Cannot read properties of undefined (reading 'toggle')
    at HTMLButtonElement.postMenuToggle"

---

classList, nie classlist ("L" w List jest dużą).

---

o cholera faktycznie. Dzięki wielkie za pomoc :D