jquery - 底部选项卡的 jQuery 切换动画

Question

我正在尝试构建一组从底部上升和下降的选项卡。到目前为止，这是我的 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 被第四个 div“覆盖”。

有谁知道如何解决这个问题？在 HTML 或 jquery 中？

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

使用具有 999 z-index 的相对位置，这似乎解决了您提到的问题。

演示

Answer 2

对于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);
            }
        }