Question

所以我有3个div列（每个33％的宽度），我正在设置它，以便一旦点击任何列，它将扩展到100％宽度，同时，重叠两列在它的旁边。

我知道这与z-index和div的定位有关但我想它需要添加到Jquery而不是CSS？

左侧div在点击时与中间和右侧div重叠，但不能让其他两个div相同。点击后，它们会拉伸到100％，但会低于左列，并且不会重叠。看小提琴......

这是在点击时拉伸列的Jquery：

$('#divleft, #divmid, #divright').toggle(function(){
$(this).animate({height:'200', width: '100%'})
}, function() {
$(this).animate({height:'200', width: '33.3%'})
})

这是CSS：

#divleft{
width:33.3%;
height:200px;
background:#ccc;
margin-top: 10px;
float: right;
position: absolute;
}

#divmid{
width:33.3%;
height: 200px;
background: #696;
margin-top: 10px;
float: right;
}

#divright{
width:33.3%;
height:200px;
background:#000;
margin-top: 10px;
float: right;  
}

左栏完美无缺，我只需要为中间和右列创建相同的效果......

谢谢！

Answer 1

这不是理想的，但这是一种方法。这件事可能对你有用。

$('#divleft, #divmid, #divright').toggle(function(){
    var did = $(this).attr('id');
    if (did == 'divleft'){
        $(this).animate({height:'200', width: '100%'});
    }else if (did == 'divmid'){
        $(this).animate({height:'200', width: '100%'});
        $('#divleft').hide();
        $('#divright').hide();
    }else{
        $(this).animate({height:'200', width: '100%'});
        $('#divleft').hide();
        $('#divmid').hide();
    }

}, function() {
    var did = $(this).attr('id');
    if (did == 'divleft'){
        $(this).animate({height:'200', width: '33.3%'})
    }else if (did == 'divmid'){
        $('#divleft').show();
        $('#divright').show();
        $(this).animate({height:'200', width: '33.3%'});
    }else{
        $('#divleft').show();
        $('#divmid').show();
        $(this).animate({height:'200', width: '33.3%'});
    }
})

Answer 2

我不得不对你的CSS进行一些小修改并添加了一些JS，但这应该可以让你开始。

$('#divleft, #divmid, #divright').toggle(function () {

    //Set a base config option that you can modify
    var cfg = { height: '200', width: '100%' };

    //Set current element as top-most div
    $(this).css({ 'z-index': 100 });

    //Get the pct of the current element and switch based on it.
    var pct = $(this).css('left').split('p')[0] / $(document).width();
    if (pct <= .33 && pct > 0) {
        cfg.left = '0';
        $(this).data('oldLeft', "33%");
    } else if (pct <= .66 && pct > .33) {
        cfg.left = '0';
        $(this).data('oldLeft', "66%");
    }
    $(this).animate(cfg)
}, function () {
    var cfg = { height: '200', width: '33%', 'z-index': 1 };
    if ($(this).data('oldLeft')) {
        console.log($(this).data('oldLeft'));
        cfg.left = $(this).data('oldLeft');
    }
    $(this).animate(cfg)
})

Here is the working fiddle

Answer 3

这是另一种解决方案。我绝对定位元素并添加z-index切换以覆盖其他元素。还必须为每个元素设置返回位置值

http://jsfiddle.net/nxtwrld/PGRAr/10/

$('#divleft, #divmid, #divright').toggle(
function(){
     $(this).css({zIndex: 2}).animate({left:'0px', width: '100%'})
}, 
function() {
    var pos = "0px",
        id = $(this).attr("id");
    if(id== "divmid") pos = "33.3%";
    else if(id== "divright") pos = "66.6%";
    $(this).animate({left:pos, width: '33.3%'}, function(){
        $(this).css({zIndex: 0})
    })
})

使div与相邻的两个div重叠并在点击时拉伸至100％宽度？

3 个答案: