버튼을 다시 클릭하면 메뉴를 숨기는 함수 만들기

Question

버튼을 다시 클릭하면 메뉴가 숨겨지도록 만드는 방법 이 스크립트가 작동하는 방식은 다른 "btn"이 열리면 활성 "btn"이 숨겨지고, + 메뉴 필드 외부를 클릭하면 모든 "btn"이 숨겨지는 것입니다. 활성 버튼을 다시 클릭하면 메뉴가 숨겨지도록 하려면 어떻게 해야 하나요?

으아아아 으아아아

<ul class="first_menu">
        <li class="menu_item">
            <button class="menu_btn">1 btn</button>
            <div class="dropdown">
                <ul class="dropdown__list">
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">1 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">2 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">3 Подпункт</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="menu_item">
            <button class="menu_btn">2 btn</button>
            <div class="dropdown">
                <ul class="dropdown__list">
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">1 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">2 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">3 Подпункт</a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="menu_item">
            <button class="menu_btn">3 btn</button>
            <div class="dropdown">
                <ul class="dropdown__list">
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">1 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">2 Подпункт</a>
                    </li>
                    <li class="dropdown__item">
                        <a href="#" class="dropdown__link">3 Подпункт</a>
                    </li>
                </ul>
            </div>
        </li>
    </ul>

Answer 1

연결 드롭다운을 확인하여 classList是否包含打开下拉列表的类。如果是，则不要添加该类，而是使用 classList.toggle 삭제하세요.

또한 클릭할 때마다 문서에 이벤트 리스너를 추가하면 안 됩니다. 페이지가 로드될 때 무조건 한 번 추가하고 클릭 횟수가 .first-menu 이내에 있는지 확인하여 활성 드롭다운을 제거해야 하는지 결정하세요.

으아아아

으아아아 으아아아 으아아아