practice - css / jquery ) j쿼리로 아코디언메뉴 만들기 + 추가

🔻 j-Query 없이 만든 아코디언 메뉴

practice - css / js ) j쿼리 없이 아코디언메뉴 만들기

Accordion Menu

with jQuery

 

.slideUp()	선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다. (올라가면서 사라짐)
.slideDown()	선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다. (내려가면서 사라짐)
.slideToggle()	선택한 요소에 .slideUp() 메소드와 .slideDown() 메소드를 번갈아가며 적용한다.

 

 

 

방법 1 / slideDown과 slideUp 이용

 

 

$(document).ready(function () {
  $(".title").click(function () {
    if ($(this).hasClass("active")) {
      slideUp();
    } else {
      slideUp();
      $(this).addClass("active").next().slideDown();
    }
    function slideUp() {
      $(".title").removeClass("active").next().slideUp();
    }
  });
});

active 상태면? - 이미 열린 상태임. slideup으로 위로 사라지게함.  

active하지 않았다면 - 이제 열어야함. class추가하고, next(),즉 text부분을 slideDown으로 아래로 펼쳐지게함.

 

 

 

result

 

 

 

방법 2 / slideToggle

 

slideToggle 메소드는

선택한 요소가 현재 사라진 상태라면 .slideDown() 메소드의 동작을 수행하고,

나타나 있는 상태라면 .slideUp() 메소드의 동작을 수행한다.

 

 

$(document).ready(function () {
  $(".title").click(function () {
    $(".text").not($(this).next(".text").slideToggle(300)).slideUp();
  });
});

 

.not 메서드는 .text중에서 지금 누른 것 = ($(this)) 의 다음(.next) .text는 slideToggle하고,

아닌것은 slideUp해서 접어버림.

 

 

 

 

방법 3 / 삼항연산자

 

$(document).ready(function () {
  $(".title").click(function () {
    function slideDown(target) {
      slideUp();
      $(target).addClass("active").next().slideDown();
    }
    function slideUp() {
      $(".title").removeClass("active").next().slideUp();
    }
    $(this).hasClass("active") ? slideUp() : slideDown($(this));
  });
});

slideDown 함수와 slideUp함수 선언.

>> slidedown시 다 slideup한 후에,

active라는 클랙스 주고, 다음요소(=.text)를 slidedown하기.

 

slideup시 active클래스를 없애고, 해당요소 다음요소(=.text)를 slideup

 

 

 

결국 세 방식 모두 원리는 같음.

(클릭한거, 즉 $this의 .text부분(=next)을 slideToggle이든 down이든 하고,

나머지 h2의 .text부분은 다 slideUp하기.)