#1_button을 누르면 div가 보여지고 없어지고

 

 

---

실행 웹브라우저 : 크롬

개발 환경: Eclipse 

나는 :  문법 배우고 있음, 독학 (피드백 좋아해요~)

---

HTML

<div class="menuButtonDIV ">
    <button class="menuBTN" id="menuBTN" onclick="muneOpen()">메뉴</button>
</div>

<div class="menuDIV" id="menuDIV" style="display: none;">
	<div class="menu1"><a href="#">메뉴1</a></div>
	<div class="menu2"><a href="#">메뉴2</a></div>
	<div class="menu3"><a href="#">메뉴3</a></div>
	<div class="menu4"><a href="#">메뉴4</a></div>
</div>

: div태그에 style을 하나 주었는데 javascript 함수에서 쓰일 그 '.style'이다.

 

Javascript

function muneOpen(){
	let menuDIV = document.getElementById('menuDIV');
	
	if(menuDIV.style.display=="none"){
		menuDIV.style.display="inline-grid";
	}else{
		menuDIV.style.display="none";
	}
}

---

<div>에 style 속성을 안 해도?

연결된 css 페이지만 있어도 실행은 된다.

이럴 경우는 버튼을 두 번 눌러야 적용된다.

크롬 개발자 도구에서 보면,

처음 버튼을 눌렀을 때는 <div>에서 <div style="none">이 추가되고,

한번 더 누르면 <div style>이 "none"에서 "inline-grid"로 바뀐다.

 

한번 누를 때 바로 적용되게 하고 싶다면 <div>에 style 속성 추가하기!

~> 구글링을 해보면 css가 적용되는 순서가 있다고 하는데

내가 하고 싶었던 것은 '적용 순서'에 맞춰라가 아닌 듯했다.