Jqueryアコーディオンを切り替える

Question

今はかなりうまくいくようなトグルでアコーディオンを作ろうとしています。 JavaScriptの初心者の助けを借りたいと思っています。

http://jsfiddle.net/z3wW4/

このありえない私が知っているかなり...

$(document).ready(function() { 
    $('#contact').click(function() { 
     $('#content2, #content3').hide(200, 'linear'); 
      $('#content').toggle(700, 'linear');   
    }); 
}); 

$(document).ready(function() { 
    $('#services').click(function() { 
     $('#content, #content3').hide(200, 'linear'); 
      $('#content2').toggle(700, 'linear'); 
    }); 
}); 

$(document).ready(function() { 
    $('#about').click(function() { 
     $('#content, #content2').hide(200, 'linear'); 
      $('#content3').toggle(700, 'linear'); 
    }); 
}); 

Answer 1

を私がお勧めしたい：

$('#menu > a').click(function() { // specifies which a elements 
    var that = $(this), // caching the selectors for performance 
     divs = $(this).siblings('div'), 
     div = $(this).nextAll('div:first'); 
    divs.not(div).hide(200, 'linear'); // hides all the sibling divs *except* for the 
             // immediately following div element 
    div.toggle(700, 'linear');   // toggles the immediately-following div 
}); 

JS Fiddle demoを。

参考文献：

• click()。
• nextAll()。
• not()。
• siblings()。
• toggle()。

Answer 2

あなたは3 fonctionsは全く同じコードを持っていることがわかります。
次に、HTML要素の機能を定義するためにhtmlクラスを使用し、次にjavascript/jqueryを使用して、これらの機能の仕組みを定義する必要があります。

それはあなたのCSSやJavaScriptのを簡素化します：

http://jsfiddle.net/td3UB/

Answer 3

あなたのコードは非常に拡張性はありませんが、あなたはこのようにそれをしようとする場合があります：http://jsfiddle.net/PzYvA/

$(document).ready(function() {  
    var $menu = $("#menu"); 
    $menu.children("a").click(function(){ 
     var $content = $(this).next("div"); 
     $menu.children("div").not($content).hide(200, 'linear'); 
     $content.toggle(700, 'linear'); 
    }); 
}); 

は、以下のCSS

#menu > a { 
    display:block; 
} 

を追加して、Aの後に<br />を削除しますタグ