티스토리 뷰

공부중/𝖩𝖠𝖵𝖠𝖲𝖢𝖱𝖨𝖯𝖳

[jQuery / Class] 메뉴 클릭 시 아이콘/클래스 변경하기

쏘악 2021. 6. 7. 18:00
jQuery 연습
메뉴 펼치기 / 접기 아이콘 변경
addClass / removeClass / hasClass / if문

 홈페이지 같은 데서 흔히 보이는... 리스트에 아이콘을 넣어서 메뉴를 펼치면 아이콘이나 스타일이 변하고 어쩌고 저쩌고... 그런 리스트를 만들고 싶었다.

요런거

간단해 보였는데... 처음에는 slideToggle(), toggleClass() 이 두 개로 뻘짓하다가 이건 뭔가 아니다 싶었다. 그 위치에 있는 요소를 바꿔치기 하고 싶은 거라 원래 있던 클래스는 없애고 새로운 클래스를 넣어줘야 했고, 슬라이드 옵션과 스타일 바꾸기를 동시에 구현, 그리고 클릭할 때마다 이벤트가 발생해야 됐다. 무작정 저기다 클래스를 넣는다고 능사가 아니더라(당연하지만...). 그래서 다른 방법을 찾아보았다.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" id="iconic-font-css" href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css" type="text/css" media="all">
</head>
<body>
  <ul id="main">
    <li class="click"><a href="#">CLICK<i class="im im-angle-down"></i></a>
	<!--   <i class="im im-angle-up"></i> 위 화살표 -->
      <ul class="sub">
        <li><a href="#">Users</a></li>
        <li><a href="#">Tags</a></li>
        <li><a href="#">Company</a></li>
      </ul>
    </li>
  </ul>
</body>


 아이콘몬스터에서 폰트로 아이콘을 가져오기 때문에...^^ <head> 태그에다 링크를 넣어두었다. 저거 어떻게 가져와야 하는 건지 홈페이지를 아무리 뒤져도 안 보여서 조금 헤매다가 개발자모드 켜서 떼왔다. 예시로 보여줄 리스트를 작성하고, 메뉴가 펼쳐졌을 때 보여줄 이미지는 따로 클래스를 만들어주었다.

li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #616161;
  font-size: 16px;
  display: block;
}
.im {
  margin-left: 12px;
  vertical-align: middle;
}
/* 기본 세팅 */

#main {
  width: 120px;
  line-height: 34px;
  text-align: center;
}
#main > li:hover { background: #efefef;}
.sub {
  display: none; /* 서브메뉴 숨김 */
  padding: 0;
  background: #f6f6f6;
}
.sub > li:hover { background: #daefbd; }


 스타일은 간략하게. 이미지에는 vertical-align: middle; 속성을 작성해 열을 맞춰준다(선택사항).

$('.click').click(function(){ //공통되는 함수
  if($('.im').hasClass("im-angle-down")) {
    $('.sub').slideDown('fast');
    $('.im').removeClass('im-angle-down').addClass('im-angle-up');
  } else {
    $('.sub').slideUp('fast');
    $('.im').removeClass('im-angle-up').addClass('im-angle-down');
  }
})


 어느 위치를 클릭하면 실행이 되게 할 건지 공통된 요소를 생각해서 작성해준다. html에서 클래스를 따로 지정해주는 편이 편하다. 그 안에 if문을 만들어 주는 것이다. 아이콘은 im이라는 공통된 클래스를 가지고 있는데, 이 요소가 im-angle-down(아래 화살표 아이콘)라는 클래스를 가지고 있는지 hasClass() 함수를 이용해 체크를 해준다.

 확인이 되면 서브 메뉴를 보여주고, 그와 동시에 원래 있던 im-angle-down라는 클래스를 removeClass()로 지우고 대체해 줄 클래스를 addClass()로 추가한다.
 그 외의 상황에서는 요소를 클릭하면 메뉴를 도로 넣고... 처음의 형태로 돌아간다.

 밑에는 보다 보니까 메뉴 슬라이드 이벤트는 slideToggle()로 빼올 수 있을 것 같아서 줄인 것.

$('.click').click(function(){ //공통되는 함수
  $('.sub').slideToggle('fast');
  if($('.im').hasClass("im-angle-down")) {
    $('.im').removeClass('im-angle-down').addClass('im-angle-up');
  } else {
    $('.im').removeClass('im-angle-up').addClass('im-angle-down');
  }
})

 실행되는 건 별 차이 없는 것 같은데... 괜찮은지 모르겠다.

See the Pen dyvKoae by yee0 (@yee0) on CodePen.

 끝

저작자표시

'공부중 > 𝖩𝖠𝖵𝖠𝖲𝖢𝖱𝖨𝖯𝖳' 카테고리의 다른 글

[jQeury / slideToggle] 3단 메뉴 클릭하여 펼치기 / 접기  (0) 2021.05.28
[jQuery] a 태그 클릭 시 새로고침 방지  (0) 2021.05.25
[Javascript / Object] 객체 오름차순 정렬 후 첫 번째 객체만 출력하기  (0) 2021.05.17
[jQuery / for문 활용] input 태그 두 개에서 입력한 범위 내로 구구단 출력  (0) 2021.05.15
댓글
«   2024/05   »
일 월 화 수 목 금 토
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 31
최근에 올라온 글
글 보관함
Total
Today
Yesterday
TAG more
내 햄수터