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; 
} 

和一个后取出<br />标签