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的相对位置，这似乎解决了你提到的问题。

DEMO

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

底部选项卡的jQuery Toggle Animation

2 个答案: