[javascript/jqeury] 세로메뉴, 메뉴 클릭시 서브메뉴 열기

1. html 코드

	<div>
              <ul id="menu">
                <li>
                  menu1
                  <ul class="submenu">
                    <li><a href="">submenu1</a></li>
                    <li><a href="">submenu2</a></li>
                    <li><a href="">submenu3</a></li>
                  </ul>
                </li>
                <li>
                  menu2
                  <ul class="submenu">
                    <li><a href="">submenu1</a></li>
                    <li><a href="">submenu2</a></li>
                    <li><a href="">submenu3</a></li>
                  </ul>
                </li>
                <li>
                  menu3
                  <ul class="submenu">
                    <li><a href="">submenu1</a></li>
                    <li><a href="">submenu2</a></li>
                    <li><a href="">submenu3</a></li>
                  </ul>
                </li>
              </ul>
            </div>

div 태그 안에 3개의 menu를 만들고 그안에 또 3개의 submenu를 만들었다

 

2. JS 코드

$("li").click(function () {
    if ($(this).hasClass("active")) {
      $(this).children().css("display", "none");
      $(this).removeClass();
    } else {
      $(this).addClass("active");
      $(this).children().css("display", "block");
    }
  });

hasClass()함수를 사용

 

 active란 이름의 클래스가 있다면 -> 

• 클릭된노드의 자식노드의 display 속성을 none으로 바꾼다 (submenu가 보이지 않도록!)
• 클릭된 노드의 클래스를 삭제한다 removeClass() (처음 로드했을때와 같은 상태로 돌아가기 위함)

 active란 이름의 클래스가 없다면 (처음 로드했을때와 같은 상태) -> 

• 클릭된 노드의 active란 이름의 클래스 추가(submenu가 열린 메뉴란 것을 확인하기 위함) 
• 클릭된노드의 자식노드의 display 속성을 block으로 바꾼다 (submenu가 보이도록!)

+) 처음엔 두 개의 경우를 따로 클리됐을때의 함수로 만들어 실행했었는데 작동이 되지않았다 대체 이유가 뭔지...하지만 hasClass()를 사용해 짠 코드가 더 간결하고 좋다고 생각한다

 

3. CSS 코드

.submenu {
  list-style-type: none;
  position: right;
  display: none; <!--로드했을 때 submenu가 안보이게 하기 위함 -->
}

페이지를 로드했을때 submenu가 보이지 않도록 css에 display속성을 none으로 꼭 설정해야 한다.