4

私は最終的にこれを機能させる方法を見つけましたが、コードは少し長くなり、より良い方法があると確信しています。これは私が望むことですが、これを拡張して10個ほどのdivで動作させたいと思っています。この方法を使用すると、コードはばかげています。私は .each() メソッドをいじってみましたが、それはさらに欲求不満につながります。誰かが私を正しい方向に向けることができれば、私は大いに義務付けられます. ここに私がこれまでに持っているもののjFiddleがあります：http://jsfiddle.net/QbsbD/47/

$(document).ready(function() {
    $('#btn1').click(function() {
        if ('#div2:visible') {
            $('#div2').hide('fast');
        }
        if ('#div3:visible') {
            $('#div3').hide('fast');
        }
        $('#div1').slideToggle("slow");
    });
    $('#btn2').click(function() {
        if ('#div1:visible') {
            $('#div1').hide('slow');
        }
        if ('#div3:visible') {
            $('#div3').hide('slow');
        }
        $('#div2').slideToggle("slow");
    });
    $('#btn3').click(function() {
        if ('#div1:visible') {
            $('#div1').slideUp('slow');
        }
        if ('#div2:visible') {
            $('#div2').slideUp('slow');
        }
        $('#div3').slideToggle("slow");
    });
});​
4

4 に答える 4

3

私はあなたのコードを編集しました。今試してみて：

http://jsfiddle.net/QbsbD/48/

新しい JS:

$(document).ready(function() {
    $('.buttons').click(function() {
        $('.hdDivs').hide('slow');
        $('#' + $(this).attr('divid')).slideToggle("slow");
    });
});​

次のように、div とボタンの間に関連付け (divid) を追加しました。

<input type="button" value="Show Div1" class="buttons" id="btn1" divid="div1" />  
<input type="button" value="Show Div2" class="buttons" id="btn2" divid="div2" />
<input type="button" value="Show Div3" class="buttons" id="btn3" divid="div3" />
于 2012-07-15T17:31:00.957 に答える
1

HTML：

<input type="button" value="Show Div1" class="buttons" data-content-id="div1"/>  
<input type="button" value="Show Div2" class="buttons" data-content-id="div2" />
<input type="button" value="Show Div3" class="buttons" data-content-id="div3" />

JS：

$('#container').on('click', '.buttons', function() {

    var content = $(this).data('contentId');
    $('.hdDivs').not('#' + content).hide('slow');
    $('#' + content).slideToggle("slow");
});

表示するdivをdataattrを使用して保存し、ボタンをクリックすると取得します。

デモ

于 2012-07-15T17:58:02.817 に答える
0

クリックされたボタンのインデックスに行くことができます！

$('.buttons').click(function(){
    var DIV = $('.hdDivs').eq( $(this).index() );
    DIV.is(':visible') ? DIV.slideToggle() : ($('.hdDivs').slideUp(), DIV.slideDown());
});

jsFiddle デモ

PS ...スライド効果が気に入らない場合は、.show('slow')and.hide('slow')に置き換えて.toggle('slow')ください:

DIV.is(':visible') ? DIV.toggle('slow') : ($('.hdDivs').hide('slow'), DIV.show('slow'));
于 2012-07-15T18:05:33.997 に答える
0

私はこの機能を使用します：

 .siblings()

jquery の Web サイトで確認してください: http://api.jquery.com/siblings/

ここにjsfiddleがあります： http://jsfiddle.net/mcLyv/2/

$(document).ready(function() {

$('.buttons').click(function() {
     var index = $(this).attr('id').substring(3);

     $('.container')
       .find('.hdDivs')
       .eq(index-1)
       .slideToggle("slow")
       .siblings()
       .hide('slow');
      });

});​
于 2012-07-15T18:12:12.293 に答える