위와 같이 설정하고 body부분을 클릭했을 때는 다음과 같이 콘솔이 출력된다.
body > .dropdown > button 등을 클릭했을 때는 다음과 같이 출력된다.
*작성일 2023-03-20*
[목차]
<aside>
❓ 토글 이벤트가 걸려있는 ul이 아닌 요소를 클릭했을 때 해당 요소를 안보이게 하기 위해 찾아보던 중 강의 예시 코드에서 *($(evt.target).parents('.dropdown').length === 0)*라고 제이쿼리로 구현한걸 보고 참고하여 자바스크립트로 변환했다. (event.target.children.length !== 0) 근데 이벤트 타겟의 자식의 길이가 뭘 말하는거지?
</aside>
<!-- HTML -->
<body>
<div class="dropdown">
<button class="dropbtn">드롭다운</button>
<ul>
<li><a href="#css">css와</a></li>
<li><a href="#js">바닐라 js로</a></li>
<li><a href="#do">구현해보는 중</a></li>
</ul>
</div>
<script src="dropdown.js"></script>
</body>
// 강의에서 작성한 jQuery
$('.dropbtn').on('click', function (evt) {
const ulElement = $('ul');
// 단순 보이기 구현
// ulElement.show();
// 토글 기능 구현
ulElement.toggle();
});
// Click Outside : 버튼 외부 요소 클릭시 드롭다운이 다시 닫히도록 할 경우 사용
$(document).on('click', function (evt) {
if ($(evt.target).parents('.dropdown').length === 0) {
$('ul').hide();
}
});
// 위의 jQuery를 JavaScript로 변환해보기 🔥
document.addEventListener('click', event => {
console.log(event.target.children)
console.log(event.target.children.length)
if(
document.querySelector('ul').classList.contains('open')
&& event.target.children.length !== 0
) {
document.querySelector('ul').classList.remove('open');
}
});
위와 같이 설정하고 body부분을 클릭했을 때는 다음과 같이 콘솔이 출력된다.
body > .dropdown > button 등을 클릭했을 때는 다음과 같이 출력된다.