2

私が取り組んでいるアプリでは、主にjQueryトグルを使用してdivを開いたり閉じたりします。表示と非表示を使用して同じ効果を実行できることを私は知っています。このjsfiddleに例があります。どちらの方法も他の方法よりも優れていますか？または、一度に1つだけ開くことを許可するdivを開いたり閉じたりするための、より効率的で準拠した別の方法はありますか？ありがとう

また、重要な場合は、TwitterBootstrapを使用するようにアプリを移動しています

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

</ p>

4

3 に答える 3

1

HTML部分からスタイルとアクションを削除することをお勧めします。

そして、それを最適化しようとしないでください。このような基本的なjQueryアクションにパフォーマンスの問題はなく、重要なのはコードの読みやすさだけです。HTML、CSS、およびJavascriptが明確であることを確認してください。あまりにもスマートなJavaScriptを作成しようとしないでください。JavaScriptの機能をすぐに確認できない場合は、保守性の問題が発生するリスクがあります。また、ページを変更したときに維持されないorderプロパティではなく、id、classes、および特定の属性に依存します。

これが私があなたのフィドルを変えた方法です：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();
});

</ p>

于 2012-10-21T17:20:06.643 に答える
1

jsFiddle デモ

「...一度に 1 つ開くことができます」

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());   
});
于 2012-10-21T17:16:13.293 に答える
0

jQueryのより良い方法はわかりませんが、別の方法は次のいずれかを使用することです。

于 2012-10-21T17:19:55.067 に答える