jQuery non-UL Accordion/content div와 별도로 div 필요 div

Question

정확히 jQuery UI 예제에 필요한 항목을 찾았습니다 : Collapsable Content Accordion.

문제는 menu-button-div를 통해 slideToggle에 content-div가 필요하다는 것입니다. 필자가 찾은 모든 예제와 튜토리얼에서는 컨텐츠 바로 위에 헤더가 있어야한다. 이로 인해 연구가 까다로워집니다.

두 가지 문제 ::: 슬라이드 효과를 두 번 호출하여 우회하는 방법을 알아낼 수 없습니다. 또한 연결된 menu-button-div를 클릭하면 content-div를 접을 수 없습니다.

---이 예는 문제를 명확하게합니다. http://jsfiddle.net/4a5WL/

--- 다음은 문맥에서 완전히 똑같은 구현입니다. http://home.jasonfletcher.info/all/alliteration_website/index.html

Answer 1

slideDown() 효과는 다른 패널이 축소 된 후에 애니메이션이 실행되기 때문에 효과가 두 배로 확대됩니다. 다른 두 개의 패널이 있으므로 두 번 수행됩니다.

여러 번 호출 되더라도 패널에 애니메이션을 적용해야합니다. 로컬 변수를 사용하여 다른 솔루션이 존재합니다 (그러나 귀하의 경우에는 :animated을 사용할 수 없습니다).

또한 코드 중복을 줄이기 위해 각 패널을 트리거 메뉴 항목과 연관시키기 위해 data() jQuery 기능을 사용했습니다.

$(document).ready(function() { 
    $("#menu1").data("panelId", "#collapse_about"); 
    $("#menu2").data("panelId", "#collapse_newsletter"); 
    $("#menu3").data("panelId", "#collapse_contact"); 

    $("#menu1, #menu2, #menu3").click(function() { 
     var first = true; 
     var panelId = $(this).data("panelId"); 
     $(".class1").not(panelId).slideUp(function() { 
      if (first) { 
       first = false; 
       $(panelId).slideToggle(400); 
      } 
     }); 
    }); 
}); 

업데이트 된 바이올린은 here를 찾을 수 있습니다 다음과 같이 당신이 원하는 것을 할 것 같다 결과는이다.