Today I Learned
오늘 한 일 🌷
LINEpluscorp 마크업을 다시 한 html에 header CSS 를 입혔다.
언어선택창에 Tab, Click event를 적용했다.
1
2
3
4
5
6
7
8
9
10
11<div class="language">
<button class="btn-language">한국어</button>
<ul class="language-list">
<li class="language-item" tabindex="0"><a href="#" tabindex="-1">English</a></li>
<li class="language-item" tabindex="0"><a href="#" tabindex="-1">日本語</a></li>
<li class="language-item" tabindex="0"><a href="#" tabindex="-1">한국어</a></li>
<li class="language-item" tabindex="0"><a href="#" tabindex="-1">中文(繁體)</a></li>
<li class="language-item" tabindex="0"><a href="#" tabindex="-1">中文(简体)</a></li>
<li class="language-item" tabindex="0"><a href="#" tabindex="-1">ภาษาไทย</a></li>
</ul>
</div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31var buttonLang = $('.btn-language');
var listLang = $('.language-list');
// language button click event
buttonLang.on('click keyup', function(e){
if(e.keyCode === 9){
listLang.parent().addClass('language-act');
}
else{
// tab 아니고 click 됐을 떄
listLang.parent().toggleClass('language-act');
}
});
// event capturing & bubbling
// div.language 외의 영역 click시 닫기
document.addEventListener("click", function(e) {
console.log(e);
if (!e.path.includes(document.querySelector(".language"))) {
listLang.parent().removeClass('language-act');
}
});
// div.language 외의 영역에 tab key 눌리면 닫기
document.addEventListener("keyup", function(e){
if(e.keyCode === 9){
if (!e.path.includes(document.querySelector(".language"))) {
listLang.parent().removeClass('language-act');
}
}
});- Header에 mouseenter, mouseleave event를 적용했다.
- flex를 쓰지 않고 해보고 싶었는데 결국 flex를 적용한 채 오늘은 마무리했다.
1 | <nav class="navigation"> |
1 | var menuItem = $('.menu-item'); |
새로 배운 것
Event Capturing과 Bubbling으로 문제를 해결했다. 원리는 꼭 정리해놔야겠다!
한 기능을 구현하면 다른 기능이 문제가 생긴다. 아직 HTML과 CSS에 대한 이해가 부족한 것 같다.
