Question

我有3个div。当你点击divChaptersHide（div1）上的“HIDE”时，它将被隐藏以显示另一个宽度较小的div（divChaptersExpand）。然后当你点击divChaptersExpand上的“EXPAND”时，它会隐藏该div，然后再次显示divChaptersHide。您也可以使用div 3（divPowerPointExpand）完成所有这些操作。我遇到的问题是，当点击div 1（或div 3）中的文本时，我需要div 2来拉伸可用空间的整个宽度。谢谢你的帮助！

HTML

<div style="margin:0 auto">
<!--CHAPTERS DIV-->
<div id="divChaptersHide" style="width:20%;background:black;color:white;float:left;height:300px;">
    <div style="padding:0 10px"><p id="chaptersHideText" style="text-align:right">HIDE</p></div>
</div>
    <!--POWERPOINT EXPAND DIV-->
    <div id="divChaptersExpand" style="display:none;width:100px;background:black;color:white;float:left;height:300px;">
        <p id="chaptersExpandText" >EXPAND</p>
    </div>
<!--VIDEO DIV-->
<div id="divMainVideo" style="width:60%;background:purple;color:white;float:left;height:300px"></div>
<!--POWERPOINT DIV-->
<div id="divPowerPointHide" style="width:20%;background:black;color:white;float:right;height:300px">
    <div style="padding:0 10px"><p id="powerPointHideText" style="text-align:left"><a>HIDE</a></p></div>
</div>
    <!--POWERPOINT EXPAND DIV-->
     <div id="divPowerPointExpand" style="display:none;width:100px;background:black;color:white;float:right;height:300px;">
        <p id="powerPointExpandText" >EXPAND</p>
    </div>

的jQuery

$(function(){
        chaptersHide();    
        powerPointHide();
        expandChapters();
        expandPowerPoint();
    });

function chaptersHide(){
        $("#chaptersHideText").click(function(){
            $("#divChaptersHide").hide("scale", {percent:0, origin: 'top'}, 500);
            setTimeout(function(){$('#divChaptersExpand').show("drop",{direction:'left'},500)}, 500);
        });
    }

function powerPointHide(){
        $("#powerPointHideText").click(function(){
            $("#divPowerPointHide").hide("scale", {percent:0, origin: 'top'}, 500)
            setTimeout(function(){$('#divPowerPointExpand').show("drop",{direction: 'right'},500)},500);
        });
    }

function expandChapters(){
        $('#chaptersExpandText').click(function(){
            $('#divChaptersExpand').hide("drop", { direction: "left" }, 500);
            setTimeout(function(){$('#divChaptersHide').show("scale", {origin:'top'}, 500)},500);
            });
    }

function expandPowerPoint(){
    $('#powerPointExpandText').click(function(){
            $('#divPowerPointExpand').hide("drop", { direction: "right" }, 500);
            setTimeout(function(){$('#divPowerPointHide').show("scale", {origin:'top'}, 500)},500);
            });
    }

JSFiddle

Answer 1

我编辑了你的JsFiddle来完成你想要做的事情。

我在你现有的“setTimeout（）”函数中嵌套了“动态”调整主div的大小。

此解决方案是一个补丁作业，但它可以让您了解如何为每个setTimeout（）函数创建“回调”函数。

<强>更新这是fiddle示例，没有setTimeout（）函数，并且转换更平滑。如果你仍然看到EXPAND推动POWERPOINT div的毛刺，只需从'reducedWidth'变量中减去200px以上。

$(function(){
        chaptersHide();    
        powerPointHide();
        expandChapters();
        expandPowerPoint();
    });
function chaptersHide(){
        $("#chaptersHideText").click(function(){
            $("#divChaptersHide").hide("scale", {percent:0, origin: 'top'}, 500, function(){
                $('#divChaptersExpand').show("drop",{direction:'left'},500, function(){
                    setVideoWidth(); 
                });
            });

        });

    }
function powerPointHide(){
        $("#powerPointHideText").click(function(){
            $("#divPowerPointHide").hide("scale", {percent:0, origin: 'top'}, 500, function(){
                $('#divPowerPointExpand').show("drop",{direction: 'right'},500, function(){
                    setVideoWidth();
                });
            });
        });
    }
function expandChapters(){
        $('#chaptersExpandText').click(function(){
            var reducedWidth = $('#divMainVideo').width() - 200;
            $('#divMainVideo').animate( { width: reducedWidth }, 500 );
            $('#divChaptersExpand').hide("drop", { direction: "left" }, 500, function(){
                $('#divChaptersHide').show("scale", {origin:'top'}, 500, function(){
                    setVideoWidth(); 
                });
            });
        });
    }
function expandPowerPoint(){
    $('#powerPointExpandText').click(function(){
        var reducedWidth = $('#divMainVideo').width() - 200;
        $('#divMainVideo').animate( { width: reducedWidth }, 500 );
        $('#divPowerPointExpand').hide("drop", { direction: "right" }, 500, function(){
            $('#divPowerPointHide').show("scale", {origin:'top'}, 500, function(){
                setVideoWidth(); 
            });
        });
    });
}

function setVideoWidth(){
    var total = getCurrentTotalWidth();
    var chapters = getCurrentChaptersWidth();
    var powerpoint = getCurrentPowerpointWidth();
    var video = $('#divMainVideo').width();

    var space = total - chapters - powerpoint - video;
    var newWidth = space + video;
    $('#divMainVideo').animate( { width: newWidth }, 250 );
}

function getCurrentTotalWidth(){
    return $('div:first').width();
}
function getCurrentChaptersWidth(){
    if( $("#divChaptersHide").css('display') !== "none" ){
        return $("#divChaptersHide").width()
    }
    else{
        return $('#divChaptersExpand').width();
    }
}
function getCurrentPowerpointWidth(){
    if( $("#divPowerPointHide").css('display') !== "none" ){
        return $("#divPowerPointHide").width()
    }
    else{
        return $('#divPowerPointExpand').width();
    }
}

当div被隐藏时，增加div的宽度以占用可用空间

1 个答案: