1

所以我有 3 个 div 列（每个 33% 宽度），我正在尝试对其进行设置，以便一旦单击任何列，它将扩展到 100% 宽度，同时重叠旁边的两列.

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

左侧 div 在单击时与中间和右侧 div 重叠，但不能让其他两个执行等效操作。单击时，它们会拉伸到 100%，但会下降到左列下方并且不重叠。看琴...

在这里小提琴 - http://jsfiddle.net/PGRAr/7/

这是在单击时拉伸列的 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;  
}

左栏效果很好，我只需要为中栏和右栏创建相同的效果......

谢谢！

4

3 回答 3

0

这是另一个解决方案。我绝对定位元素并添加 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})
    })
})

​</p>

于 2012-11-20T17:50:53.677 回答
0

这并不理想，但这是一种方法。这里面的东西可能对你有用。

$('#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%'});
    }
})

​</p>

于 2012-11-20T17:44:41.480 回答
0

我必须对你的 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)
})

这是工作小提琴

于 2012-11-20T17:48:38.930 回答