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

Question

在我正在开发的一个应用程序中，它主要使用 jQuery 切换来打开和关闭 div。我知道使用显示和隐藏可以达到相同的效果。我在这个jsfiddle中有一个例子。任何一种方法都比另一种更好吗？或者是否有另一种更高效、更合规的方法来打开和关闭 div，一次只允许打开一个？谢谢

此外，如果重要的话，我会将我的应用程序移至使用 Twitter Bootstrap

<div id="wrapper"> Toggle Method
<div id="action-buttons">
    <a class="button" onclick="$('#boxone').toggle();$('#boxtwo').hide();return false;"><span>One</span></a>
    <a class="button" onclick="$('#boxtwo').toggle();$('#boxone').hide();return false;"><span>Two</span></a>
</div>
<div id="boxone" style="display:none;">Box One</div>
<div id="boxtwo" style="display:none;">Box Two</div>
</div>
<div id="wrapper"> Show Hide Method
<div id="action-buttons">
    <a class="button" onclick="$('#showboxone').show();$('#showboxtwo').hide();return false;"><span>One</span></a>
    <a class="button" onclick="$('#showboxtwo').show();$('#showboxone').hide();return false;"><span>Two</span></a>
</div>
<div id="showboxone" style="display:none;">Box One</div>
<div id="showboxtwo" style="display:none;">Box Two</div>
</div>

​

Answer 1

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

并且不要尝试优化它:这种基本的 jQuery 操作不存在性能问题，唯一重要的是代码的可读性:确保您的 HTML、CSS 和 Javascript 是显而易见的。不要尝试使 javascript 变得过于智能:如果您无法立即看到它的作用，则存在可维护性问题的风险。并依赖 id、类和特定属性，而不是在您更改页面时无法跟上的订单属性。

这是我改变你的 fiddle 的方法:http://jsfiddle.net/PRVm8/

HTML:

<div id="wrapper"> Toggle Method
<div id="action-buttons">
    <span class="button1"  target=boxone>One</span>
    <span class="button1"  target=boxtwo>Two</span>
</div>
<div id="boxone" class=box1>Box One</div>
<div id="boxtwo" class=box1>Box Two</div>
</div>

<div id="wrapper"> Show Hide Method
<div id="action-buttons">
    <a class="button2"  target=boxone><span>One</span></a>
    <a class="button2" target=boxtwo><span>Two</span></a>
</div>
<div id="showboxone" class=box2>Box One</div>
<div id="showboxtwo" class=box2>Box Two</div>
</div>
​

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

​