jQuery Dropdown menu 만들기 - 초심자용 .toggle() .not() 등등

개인적으로 서브메뉴 만들 때 참고하려고 만든 정리 글이니 부족해보일 수 있습니다!

Tip 이나 틀린 점은 댓글로 남겨주시면 감사합니다!!!!!!!!!!!!!!

---

기본적으로 ul li ul 형태의 서브메뉴를 예로 들어서 하겠습니다.

jQuery 버전은 1.12.4 버전을 사용했습니다.

 

실습결과

DropDown Menu

 

HTML 코드

<div class="dropdown_menu">
	<!-- 메인메뉴 #gnb -->
    <ul id="gnb">
      <li>
        <a href="#">slide1 <b>▼</b></a>
        <!--서브메뉴↓↓ -->
        <ul class="sub_menu">
          <li><a href="#">sub_slide1</a></li>
          <li><a href="#">sub_slide2</a></li>
        </ul>
      </li>
      <li>
        <!-- slide2 -->
      </li>
      <li>
        <!-- slide3 -->
      </li>
    </ul>
</div>

HTML은 다들 비슷비슷 하실 꺼라고 생각합니다. 더 추가 내용 없이 넘어가겠습니다.

반응형

 

CSS 코드

/* display는 굳이 안적어줘도 됨. */
#gnb li ul{
  display:block;
  border: 1px solid black;
  border-top:none;
}

/* hover 이벤트로 border 효과를 택스트가 포함된 a 태그에 적용 */
#gnb>li:hover>a {
  border-bottom: 2px solid black;
}

.sub_menu li:hover a {
  border-bottom:2px solid black;}

 

jQuery_1 : .not( ) 메소드 활용

$(document).ready(function(){

  //서브메뉴 우선 숨기기
  $('.sub_menu').hide();

  //메인메뉴의 <li> 태그를 클릭할때마다 이벤트 함수 발생
  $('#gnb>li').click(function(e){

    //click 시 <li> 태그의 a 태그 href(하이퍼링크) 타는 것을 막아주기
    e.preventDefault();

    // 클릭한 메인메뉴 <li>태그의 .sub_menu 를 제외한 모든 서브메뉴는 hide()로 숨기기
    $('.sub_menu').not($(this).find('.sub_menu').toggle()).hide();
  });

});

만약 메인메뉴 <li> 태그 안에 <a> 태그의 하이퍼링크를 달지 않았거나 쓰지 않았다면

e.prevenDefault(); 는 쓰지 않아도 된다.

 

.sub_menu 가 길다면 변수를 선언해서 사용하자. 예) var sm = $('.sub_menu');

 

.not()이 사용된 문장에서 바뀌면 안되는 것.

• $('.sub_menu') => this(x)
  • this는 #gnb>li 를 가르키기 때문에 메인메뉴가 사라지는 마술을 보고 싶지 않으면 바꾸지 말자.
• .not($(this).find('.sub_menu) ...)
  • this 는 자신이 클릭한 <li> 태그 안의 서브메뉴를 클릭해주기 때문에 바뀌면 안된다.
  • .sub_menu 대신에 서브메뉴를 가르키는 "#gnb > li > ul" 이런 방식이라면 바꿔줘도 된다.

.not()이 사용된 문장에서 바뀌어도 되는 부분

• 바로 위에서 언급한 .sub_menu
  • 서브메뉴를 가르키는 선택자라면 아무거나 상관없다.
• .toggle()
  • toggle 종류는 아무거나 사용해도 상관이 없다.
  • 예) slideToggle() | fadeToggle()

---

jQuery_2 : addClass(), removeClass()

class를 사용한 방법이다. click이벤트 발생시 적어뒀던 class를 넣다 뺏다 한다.

약간의 작업을 쳐주기로 한다.

 css 수정

/* #gnb li ul 대신 .sub_menu 로 전환 */
.sub_menu{
  display:none;
  border: 1px solid black;
  border-top:none;
}

/* 추가할 class */
.show{
  display:block;
}

#gnb li ul 을 .sub_menu로 바꿔준다.

: CSS 우선순위 적용으로 인해 뒤에 .show를 추가해줘봤자 적용이 안되기 때문이다.

: 추가로 display:none을 적용시켜준다 (감춰두기)

 

추가할 클래스를 작성한다

: display:none을 한 상황이기 때문에 보여주기 위한 block값을 가진 클래스 show를 작성한다

 

jQuery

$(document).ready(function(){
  
  $('#gnb>li').click(function(){
    //.sub_menu가 display:none 되어있는지 확인한다
    if($(this).find('.sub_menu').css("display")=="none"){
      //다른 서브메뉴의 show 클래스를 삭제
      $('.sub_menu').removeClass('show');
      //클릭한 서브메뉴만 show 클래스 추가
      $(this).find('.sub_menu').addClass('show');
    }else{
      //다른 서브메뉴가 display:block; 처리 되어있다면 show 제거
      $(this).find('.sub_menu').removeClass('show');
    }
  });
});

click 이벤트만으로는 addClass와 remove 클래스를 사용할 경우 서브 메뉴를 클릭했을때 선택되지 않은 서브메뉴가 꺼지지 않고 켜져있을 확률이 높다.

 

간단하게 작성을 위해 if-else 문을 사용해 다른 서브메뉴가 켜져있을 때 꺼주게 적용을 하였다. (else문)

 

---

jQuery_3 : 다른 서브메뉴가 켜져도 상관없다면?

다른 서브메뉴가 켜져있어도 상관이 없다면 toggle이나 slideToggle, fadeToggle 을 사용해서 간단하게 만들어보자.

 

$('#gnb>li').click(function(){
	//toggle()
	$(this).find('.sub_menu').toggle();
    
    //slideToggle()
	$(this).find('.sub_menu').slideToggle();
    
    //fadeToggle()
	$(this).find('.sub_menu').slideToggle();
});

개인적으로 이런식으로 쓸꺼면 맨 위의 .not() 메소드와 함께 써서 다른 서브메뉴도 감출 수 있도록 하는 걸 추천한다.