Question

在我正在使用的应用程序中，它主要使用jQuery切换来打开和关闭div。我知道使用show和hide可以完成同样的效果。我在这个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

jsFiddle demo

“......允许一次打开”

HTML：

<div class="wrapper"> Super method
    <div class="action-buttons">
        <a href="#"><span>One</span></a>
        <a href="#"><span>Two</span></a>
    </div>
    <div class="box">Box One</div>
    <div class="box">Box Two</div>
</div>

<div class="wrapper"> Super method
    <div class="action-buttons">
        <a href="#"><span>One</span></a>
        <a href="#"><span>Two</span></a>
    </div>
    <div class="box">Box One</div>
    <div class="box">Box Two</div>
</div>

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 2

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

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

以下是我改变你的小提琴的方式：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();
});

Answer 3

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

jQuery UI Accordion
或
jQuery UI Tabs。

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

3 个答案:

jsFiddle demo