[아코디언메뉴] 3level accordion menu

[아코디언메뉴] 3level accordionMenu

먼저 결과.

 

코드리뷰.

1. slideDown() 조건.

해당 a 클릭 시,

1. a 바로 밑 형제 요소 ul 이 존재하며,
2. ul이 보이지 않아야 한다.

$('a').on('click', function() {
  // 1. ul 존재하며, ul이 보이지 않아야한다.
  if( $(this).next().is('ul') && !($(this).next().is(':visible')) ) {
    // console.log('slideDown');
    $(this).next().slideDown();
    return false;
  }
});

 

2. slideUp() 조건

해당 a클릭 시,

1. a 바로 밑 형제 요소 ul이 존재하며,
2. ul이 보여야한다.

$('a').on('click', function() {
  // 2. ul 존재하며, ul이 보여야다.
  if( $(this).next().is('ul') && ($(this).next().is(':visible')) ) {
    // console.log('slideUp');
    $(this).next().slideUp();
    return false;
  }
});

 

결과.

$('a').on('click', function() {
  // 1. ul 존재하며, ul이 보이지 않아야한다.
  if( $(this).next().is('ul') && !($(this).next().is(':visible')) ) {
    // console.log('slideDown');
    $(this).next().slideDown();
    reuturn false;
  }
  
  // 2. ul 존재하며, ul이 보여야다.
  if( $(this).next().is('ul') && ($(this).next().is(':visible')) ) {
    // console.log('slideUp');
    $(this).next().slideUp();
    return false;
});

 

추가 조건.

Q. slideDown() 된 상태에서 다른 a 클릭 시,

눌렀던 ul은 slideUp() 되고 누른 ul은 slideDown() 될 수 없을까?

if( $(this).next().is('ul') && !$(this).next().is(':visible')) ) {
  // slideDown
  // ul 중에 $('ul')
  // 내가 클릭했던 것 말고 $('ul').not($(this).next())
  // slideUp
  $('.menu ul').not($(this).next()).slideUp();
}

 

❗️주의해야 할 점1.

ul 중에 $('ul') 이 아니라 $(.menu ul)이다.

$('ul')로 할 경우, ul.menu 도 같이 사라져 버리기때문.

 

❗️주의해야 할 점2.

클래스와 탐색 선택자를 넣어 명확히 해주는 것이 좋다. (다른 요소와 이벤트가 꼬여버릴 수도 있다.)

$('.menu ul').not($(this.next().parentsUntil('.menu')).slideUp()

parentsUntil() :: 선택한 요소의 상위 요소 중에서 지정한 선택자에 해당하는 요소 바로 이전까지의 요소를 모두 선택한다.

 

if( $(this).next().is('ul') && !$(this).next().is(':visible')) ) {
  $('.menu ul').not($(this).next().parentsUntil('.menu')).slideUp();
}

 

 

 

 

a 를 클릭하면 해당 ul ($(this).next())이 변한다는 것을 자꾸 잊는다. 계속 인식하고 생각하면서 코드 짜자🔥