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

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来完成你正在尝试做的。

我在现有的“动态”调整您的主div的嵌套另一个“setTimeout（）”函数。

这个解决方案是一个补丁工作，但它会告诉您如何完成为每个setTimeout（）函数创建一个“回调”函数。

UPDATE： 这里是没有的setTimeout（）函数和一个平滑的过渡的fiddle例子。如果您仍然看到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(); 
    } 
}