1

したがって、3つのdiv列（それぞれ33％の幅）があり、いずれかの列をクリックすると100％の幅に拡張され、同時にその隣の2つの列が重なるように設定しようとしています。 。

z-indexとdivの配置に関係していることは知っていますが、CSSではなくJqueryに追加する必要があると思いますか？

左のdivはクリック時に中央のdivと右のdivに重なっていますが、他の2つに同等の動作をさせることはできません。クリックすると、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

これは理想的ではありませんが、ここに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%'});
    }
})

</ 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 に答える
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 に答える