Jquery 처음부터 아코디언 : 아코디언 및 Jquery 성능을위한 마크 업 Q

Question

모든 응답을 주셔서 감사합니다.

나는

내 첫 번째 질문은 accourdion에 대한 올바른 의미 HTML 무엇이다 (의미 HTML과 유지에) .. JQuery와 아코디언을 작성,하지만 내 마크 업 및 JQuery와 올바른 또는하지 궁금 해요 (JSFIDDLE example)에 사용하고있는 컨텍스트 ... 현재 저는 콘텐츠를위한 li와 div가있는 ul을 사용합니다 ..

두 번째 질문은이 jquery를 개선 할 수 있습니까? 특정 jQuery 스크립트의 성능 측정

JSFIDDLE example

$(document).ready(function(){ 
    //store the exact block of html we are working with... the context 
    var $context = $("ul#accordion")[0]; 
    console.log($context); 
    //check the context 
    $("li a", $context).live("click", function(e){ 
     //store this due to being used more than once 
     var $clicked = $(this); 
     //slide anything up thats already open 
     $("li div", $context).slideUp(200); 
     //test to see if the div is hidden or not.. 
     //slide down if hidden 
     if($clicked.next().is(":hidden")){ 
      $clicked.next().slideDown(200); 
     }; 
    //prevent default behaviour 
    e.preventDefault(); 
    }); 

});​ 

Answer 1

• 당신은 단지 하나의 요소에, ($(context).find(selector) 동일) $(selector, context)를 사용하고 있기 때문에, 내가 그들을 병합하는 것이 좋습니다 : $('ul#accordion li')
• 사용 $(ancestor).on('event', 'selector', fn) 대신
• $('ancestor selector').live(fn) 장소 e.preventDefault()을 위에. 코드에서 오류가 발생할 때마다 부작용이 발생하지 않습니다.
• 내 제안 된 다른 변경 사항이 귀하의 질문에 대한 언급에 고색되어 있습니다.

코드 :

$(document).ready(function(){ 
    // :first can be omitted, but it's an literal translation 
    $("ul#accordion:first li").on("click", "a", function(e) { 
     // prevent default behaviour 
     e.preventDefault(); 

     // slide anything up thats already open 
     $("li div", this).slideUp(200); 

     // slide down if hidden 
     $clicked.next(':hidden').slideDown(200); 
    }); 
});