[jQuery/Javascript] 버튼으로 diplay 바꾸기

조건문 if/else를 사용해서 버튼으로 display 속성을 바꿔주는 jQuery를 작성했다.

HTML / CSS

---

<header>
  <h1>jQuery</h1>
  <button class="nav-btn">nav</button>
  <ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
  </ul>
</header>

header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
} 

.nav-btn {
  padding: 12px 20px;
  color: #fff;
  background-color: #06f;
  border: 0;
  border-radius: 5px;
} 

.list-group {
  position: absolute;
  top: 96px;
  right: 20px;
  display: none;
}

 

jQuery

---

실패

• 사고 : list-group이 display= "none" 이면 .nav_btn을 눌렀을 때 .list-group을 열고, display= "block" 이면 .nav_btn을 눌렀을 때 .list-group을 닫아라.

  if( $('.list-group').css('display') == 'none' ){
  	$('.nav-btn').click(function(){
  		$('.list-group').show();
  	});
  } else {
  	$('.nav-btn').click(function(){
  		$('.list-group').hide();
  	});
  }​

실패 원인 : 위 코드는 위에서 부터 차례대로 코드를 읽어나갈 때 최초 1번은 실행이 가능하나, 이후에는 이미 if/else 조건문을 다 읽었기 때문에 재실행이 어렵다.

성공

• 사고 : .nav_btn을 눌렀을 때, .list-group이 diplay= "none" 이면 열고, display= "block"이면 닫아라

  $('.nav-btn').click(function(){
  	if( $('.list-group').css('display') == 'none' ){
  		$('.list-group').show();
  	} else {
  		$('.list-group').hide();
  	}
  });

• 성공 원인 : 실패한 코드와는 달리, 'btn을 클릭했을 때'가 display를 갱신하는 포인트가 되어 클릭할 때 마다 display를 바꾸는 코드를 실행해준다.

 

Javascript

---

실패

• 사고 : .list-group이 display= "none" 이면 .nav_btn을 눌렀을 때 .list-group을 열고, display= "block" 이면 .nav_btn을 눌렀을 때 .list-group을 닫아라.

  document.getElementsByClassName('nav-btn')[0].addEventListener('click', function(){
  	if( document.getElementsByClassName('list-group')[0].style.display == 'none' ){
  		document.getElementsByClassName('list-group')[0].style.display = 'block';
  	} else {
  		document.getElementsByClassName('list-group')[0].style.display = 'none';
  	}
  });​

• 실패 원인 : .list-group는 html 문서에서 style="display: none;" 이라는 속성을 가지고 있지 않다. 따라서 .nav_btn을 누르면 else 구문부터 실행하고 그 다음 순서에 if문을 실행한다. 즉, .nav-btn 첫번째 클릭에서는 style="display: none;"이 추가되어 .list-group이 보이지 않고 두번째 클릭에서 "display: block;"이 되면서 .list-group이 보이게 된다.

  .style.display = 'none'; //여기서 style은 html 문서에서 style="display: none;" 을 추가하라는 것 (css의 속성을 바꾸는 게 아님)

• Q : jQuery랑 동일하게 작성했는데 왜 다르게 인식할까?
  • A : jQuery로 작성할 때는 애초에 css속성이 display= "none"; 인 걸 전제로 했기 때문

    if( $('.list-group').css('display') == 'none') //.css('display') == 'none'

성공

• 사고 : .nav_btn을 눌렀을 때, .list-group이 style="diplay: block;" 이면 "display: none;"으로 바꾸고, style="display: block;"이면 "display: block;"으로 바꿔라.

  document.getElementsByClassName('nav-btn')[0].addEventListener('click', function(){
  	if( document.getElementsByClassName('list-group')[0].style.display == 'block' ){
  		document.getElementsByClassName('list-group')[0].style.display = 'none';
  	} else {
  		document.getElementsByClassName('list-group')[0].style.display = 'block';
  	}
  });