0

下から上下するタブのセットを作成しようとしています。これが私のjqueryコードです

$(document).ready(function(){ 
    $(".tab").click(function() { 
        if($(event.target).parent().css('top') == '230px')
            {$(event.target).parent().stop().animate({top:'0px'},1000);};
        if($(event.target).parent().css('top') == '0px')
            {$(event.target).parent().stop().animate({top:'230px'},1000);};
    });
});

これが私の最初の亀裂です：http： //jsfiddle.net/X3cbG/4/

私の問題は次のとおりです。私のhtmlのため、ボタン1、2、および3は4番目のdivによって「カバー」されています。

誰もがこれを回避する方法を知っていますか？HTMLまたはjqueryのいずれかで？

4

2 に答える 2

1

タブCSSクラスを次のように更新します。

.tab {position:relative; z-index:999; width:100px; text-align:center; cursor:pointer; background:rgb(54, 25, 25); background: rgba(54, 25, 25, .5);}

あなたが言及した問題を解決するように思われる999z-indexで相対位置を使用しました。

デモ

于 2012-11-23T17:14:06.643 に答える
0

jqueryの場合：

 $(document).ready(function(){
  $(".tab").click(function() {
    var getId = $(this).attr('id');
    var top = $('#Sbox'+getId).css('top');
    $('.Sbox').animate({top:'230'}, 1000);
    move(getId, top);
  });
});

 function move(getId, top) {
            if(top == '0px' || top == 'auto')
            {
                $('#Sbox'+getId).animate({top:'230'}, 1000);
            }
            else if(top == '230px')
            {
                $('#Sbox'+getId).animate({top:'0'}, 1000);
            }
        }
于 2012-11-23T17:32:25.820 に答える