jQuery 아코디언 메뉴 확장 및 최적화

Question

저는 jQuery 프로그래밍에 익숙하지 않으며 사용자 정의 jQuery 아코디언에 문제가 있습니다. 현재 링크에 대한 아코디언 확장에 대한 나의 시도는 성공적이지 못했으며 어떻게 작동 시킬지에 대한 손실이 있습니다.

주 질문 : 섹션 [2]을 (현재 활성화 된 링크를 확장하고 강조 표시) 어떻게 얻을 수 있습니까?

이 문제는 내가 요소를 선택하는 방법과 관련이 있다고 생각합니다. 이 섹션에있는 코드 세 줄은 현재 내 최고의 샷입니다. 그것은 강조 표시하고 확장합니다 모두 링크 및 하이라이트 모두 아코디언 헤더 (h2). 물론 내가하는 일이 아닙니다. 아코디언이 다르게 구조화 된 것처럼 보이는 내 온라인 검색은 효과가 없었습니다. 또는 어떤 대답도이 경우에 적합하지 않기 때문에 몇 가지 주요 개념을 오해하고 있습니다.

보조 질문 : 어떻게 섹션 ​​3을 최적화 할 수 있습니까? 코드 자체는 간단하지만 여러 번 반복하여 아래 섹션 [3]에서 혼란 스럽습니다. 여기

내 현재 jQuery 코드, adapted from this tutorial입니다 :

jQuery(document).ready(function() { 

// [1] initialize 
var parentDivs = $('#nestedAccordion div'), 
    childDivs = $('#nestedAccordion h3').siblings('div'), 
    lowDivs = $('#nestedAccordion h4').siblings('div'), 
    img1 = '...', 
    img2 = '...'; 

// [2] expand current link 
$('#nestedAccordion a').addClass("a-active"); 
$('#nestedAccordion a').parents('div').slideDown(); 
$('#nestedAccordion a').parents('div').find('h2').addClass("open"); 

// [3] accordion movement (repetitious...) 
$('#nestedAccordion h2').click(function() { 
    parentDivs.slideUp(); 
    $('#nestedAccordion h2').removeClass("open"); 
     $('#nestedAccordion h3').removeClass("open"); 
     $('#nestedAccordion h4').removeClass("open"); 
    $('#nestedAccordion h2').find('img').attr('src', img2); 
    $('#nestedAccordion h3').find('img').attr('src', img2); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
     $(this).find('img').attr('src', img1); 
     $(this).addClass("open"); 
    } else { 
     $(this).next().slideUp(); 
     $(this).find('img').attr('src', img2); 
     $(this).removeClass("open"); 
    } 
}); 
$('#nestedAccordion h3').click(function() { 
    childDivs.slideUp(); 
    $('#nestedAccordion h3').removeClass("open"); 
     $('#nestedAccordion h4').removeClass("open"); 
    $('#nestedAccordion h3').find('img').attr('src', img2); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
     $(this).find('img').attr('src', img1); 
     $(this).addClass("open"); 
    } else { 
     $(this).next().slideUp(); 
     $(this).find('img').attr('src', img2); 
     $(this).removeClass("open"); 
    } 
}); 
$('#nestedAccordion h4').click(function() { 
    lowDivs.slideUp(); 
    $('#nestedAccordion h4').removeClass("open"); 
    $('#nestedAccordion h4').find('img').attr('src', img2); 
    if ($(this).next().is(':hidden')) { 
     $(this).next().slideDown(); 
     $(this).find('img').attr('src', img1); 
     $(this).addClass("open"); 
    } else { 
     $(this).next().slideUp(); 
     $(this).find('img').attr('src', img2); 
     $(this).removeClass("open"); 
    } 
}); 

});

여기 아코디언 HTML 구조입니다. 각 레벨에는 div가있어서 jQuery slideUp 및 slideDown 함수가 작동합니다. div는 확장 및 축소됩니다. 당신이 당신의 자신의 아코디언을하는 경우

<div id="nestedAccordion"> 
<h2>Top-level Heading</h2> 
    <div> 
    <h3>Mid-level Heading</h3> 
     <div> 
     <h4>Bottom-level Heading</h4> 
      <div> 
      <ol> 
       <li>Link</li> 
       </ol> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

, 나는 그런 다음 HTML을

<div class="accordion"> 
    <div class="accordion-title"></div> 
    <div class="accordion-body"></div> 
</div> 

같은과 CSS

위해 뭔가를 보일 것이다

$(function() { 
    $(".accordion-title").click(function(){ 
    body = $(this).closest("accordion").find(".accordion-body") 
    if (body.is(".closed")){ 
     body.removeClass("closed") 
    }else{ 
     body.addClass("closed") 
    } 
    }) 
}); 

의 라인을 따라 뭔가 더 추천 할 것입니다

.closed { 
    display: none; 
} 

나 이러한 방식으로 각 아코디언에 대한 코드를 개별적으로 반복 할 필요가 없습니다. 그리고 show와 hide 함수는 다소 간단한 html 구조를 허용합니다.

jQuery 대신 $를 사용하는 것이 더 읽기 쉽습니다 (개인 의견).