jQuery切换和隐藏或显示隐藏是否有比这更好的方法（包括jsfiddle）

在我正在使用的应用程序中，它使用jQuery切换主要用于打开和关闭div。 我知道使用show和hide可以完成相同的效果。 我在这个jsfiddle中有一个例子。 两种方法都比另一方好吗？ 或者是否有另一种方法更有效并且兼容打开和关闭div只允许一次打开？ 谢谢

此外，如果重要的话，我正在移动我的应用程序以使用Twitter Bootstrap

 Toggle Method 
 One Two 
 
Box One
 
Box Two
 
 
 Show Hide Method 
 One Two 
 
Box One
 
Box Two
  

Answer 1

我建议从HTML部分中删除样式和操作。

并且不要尝试优化它：在这些基本的jQuery操作上没有性能问题，唯一重要的是代码的可读性：确保你的HTML，CSS和Javascript是显而易见的。 不要试图制作太聪明的j​​avascript：如果你不能立即看到它的作用，就存在可维护性问题的风险。 并且依赖于id，类和特定属性，而不是在更改页面时无法跟上的订单属性。

这是我改变你的小提琴的方式： http ： //jsfiddle.net/PRVm8/

HTML：

 
 Toggle Method 
 One Two 
 
Box One
 
Box Two
 
 
 Show Hide Method 
 One Two 
 
Box One
 
Box Two
 
​ 

Javascript：

 $('.button1[target="boxone"]').click(function(){ $('#boxtwo').hide(); $('#boxone').toggle(); }); $('.button1[target="boxtwo"]').click(function(){ $('#boxone').hide(); $('#boxtwo').toggle(); }); $('.button2').click(function(){ $('.box2').hide(); $('#show'+$(this).attr('target')).show(); }); 

Answer 2

jsFiddle演示

“……允许一次打开一个人”

HTML：

 
 Super method 
 One Two 
 
Box One
 
Box Two
 
 
 Super method 
 One Two 
 
Box One
 
Box Two
  

CSS：

 .box{ display:none; } 

jQuery的：

 $('.action-buttons').on('click','a',function(e){ e.preventDefault(); var $allbox = $(this).closest('.wrapper').find('.box'), $box = $allbox.eq( $(this).index() ), doIt= ($box.is(':visible')) ? $box.slideUp() : ($allbox.slideUp()) ($box.slideDown()); }); 

Answer 3

我不知道jQuery中更好的方法，但另一种方法是使用：

• jQuery UI手风琴
  要么
• jQuery UI选项卡 。