[JS Toy Project] DropDownMenu

# DOM 조작을 이용한 DropDowMenu 예제

첫번째로 Dom 조작에 필요한 녀석들을 가지고 온다

<script>
const toggleBtn = document.querySelector(".dropdown .dropdown-toggle");
const dropdownMenu = document.querySelector(".dropdown-menu");
const options = document.querySelectorAll(".dropdown-option")
const nextButton = document.querySelector(".next-button");
</script>

- 우선 show 라는 class를 DROPDOWNSHOW 라는 상수로 지정을 해둔다.
dropdownMenu에 classList.toggle(DROPDOWNSHOW)를 줘서 클릭시 지점리스트 들이 보이도록 on/off 버튼을 만들었다.

<script>
const DROPDOWNSHOW = "show"

function handleToggleOn () {
    dropdownMenu.classList.toggle(DROPDOWNSHOW);
};
</script>

- options 라는 dom 요소를 가져와 각각의 item에 click 이벤트를 걸고 selectOption 함수를 실행 시키도록 한다.

<script>
options.forEach(function (item) {
    item.addEventListener("click", selectOption);
});
</script>

_- selectOption 함수는
우선 첫번째로 toggleBtn 의 innerText가 각각의 item 의 내용으로 변경된다.
두번째 toggleBtn에 classList.add로 selected를 넣어서 강조 효과를 준다.
세번째 위의 코드가 다 실행되면 nextButton.removeAttribute를 이용해 disabled 효과를 없앤다.

<script>
function selectOption (item) {
    toggleBtn.innerText = item.currentTarget.innerText;
    toggleBtn.classList.add("selected");
    nextButton.removeAttribute("disabled");
}
</script>

- handleBlurOn 함수를 생성해서 toggleBtn이 blur가 되면
dropdownMenu의 classList.remove(DROPDOWNSHOW) show 클래스를 지워준다.

<script>
function handleBlurOn () {
    dropdownMenu.classList.remove(DROPDOWNSHOW);
}

// 마지막으로 toggleBtndㅔ click , blur 이벤트를 걸어준다.
toggleBtn.addEventListener("click", handleToggleOn);
toggleBtn.addEventListener("blur", handleBlurOn);
</script>