Jqueryゼロからのアコーディオン：アコーディオンとJqueryのパフォーマンスのためのマークアップQ

Question

すべての応答に感謝します。

私は私の最初の質問はでaccourdionの正しいセマンティックHTMLは何かということです

（セマンティックHTMLに合わせて）.. jQueryのアコーディオンを書くことが、私のマークアップとjQueryが正しいかではないかしらよ私が使用している文脈（JSFIDDLE example）..現在私はコンテンツをliとdivでulを使用しています。

2番目の質問は、この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); 
    }); 
});