當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(); 
    } 
}