Javascript 当其他部分展开时，将div保持在底部

我试图模仿gmail的“撰写”窗口（你知道从收件箱右下角打开的窗口）。当我有多个窗口时，我很难将最小化的窗口放在屏幕底部

有关详细信息，请参阅代码笔

问题: 当窗口1和窗口2都最小化时，单击窗口1，窗口2标题栏将向上提升，而不是停留在屏幕底部

HTML

JS:

---

而不是在右下角设置

bottomBar

fixed

。在右下角设置

bottomWindow

：

更新：

---

通过添加一点javascript，您可以让它按照您的意愿工作：

putDivBottom（'.bottomWindow'）；
$（“.titleBar”）。单击（函数（e）{
宽度1=$（this.parent（）.width（）；
right1=$（this.css（“right”）；
控制台日志（宽度1）；
$（this.find（'.windowSize'）.toggleClass（“隐藏”）；
$（this）.next（'.contentSection'）.toggleClass（'hidden'）；
setButtomDiv（$（this）.parent（），width1）；
log（$（this.parent（）.width（））；
});
函数putDivBottom（elementClass，宽度1）{
对于（i=0；我同意答案Gaurav！但是当动态添加windows时会发生什么。如何处理您添加的style=“right:260px”？通过添加一点javascript，我们可以处理style=“right:260px”.我在回答中详细阐述了如何处理。创建了一个类似切换的功能，您可以相应地修改。您真是个老板。谢谢Gaurav！
<div class="bottomBar"><!--start bottomBar-->

   <div class="bottomWindow"><!--start bottomWindow-->
     <div class="titleBar bg-black color-white">
       <div class="fl">This is a titlebar</div>
       <i class="windowSize fa fa-angle-up fr"></i>
       <i class="windowSize hidden fa fa-angle-down fr"></i>
     </div>
     <div class="contentSection hidden">
       <p>Hello, this is content</p>
     </div>
   </div> <!-- end bottomWindow -->

  <div class="bottomWindow"><!--start bottomWindow-->
     <div class="titleBar bg-black color-white">
       <div class="fl">This is a titlebar</div>
       <i class="windowSize fa fa-angle-up fr"></i>
       <i class="windowSize hidden fa fa-angle-down fr"></i>
     </div>
     <div class="contentSection hidden">
       <p>Hello, this is content</p>
     </div>
   </div> <!-- end bottomWindow -->

</div> <!--end bottomBar -->

/*global stuff*/
.hidden{display:none;}
.fr {float:right;}
.fl {float:left;}
.bg-black{background-color:black;}
.color-white{color:white;}

/* window stuff */
.bottomBar{position:fixed;bottom:0;right:0;}
.bottomWindow {margin-right:20px;overflow:hidden;border:1px solid black;float:left;}
.titleBar{padding:10px 20px;min-width:200px;overflow:hidden;cursor:pointer;}
.contentSection {padding:5px 20px;}

$(".titleBar").click(function(e) {
$(this).find('.windowSize').toggleClass("hidden");
$(this).next('.contentSection').toggleClass('hidden');
});

putDivBottom('.bottomWindow');
$(".titleBar").click(function(e) {
 width1 = $(this).parent().width();
 right1 = $(this).css("right");
 console.log(width1); 
 $(this).find('.windowSize').toggleClass("hidden");
 $(this).next('.contentSection').toggleClass('hidden');
  setButtomDiv($(this).parent(),width1);
  console.log($(this).parent().width());
});

function putDivBottom(elementClass,width1){
  for(i=0;i<$(elementClass).length;i++){
  $(elementClass+":eq("+i+")").css({"right":(i)*260}); 
  }
}
function setButtomDiv(this1, width1){
  index1 = $(".bottomWindow").index(this1);
  if (width1==240){
     rightAdd = $(this1).width()-240;
  }
  else{
     rightAdd = 240 - width1;
  }
  for(i=index1+1;i<$(".bottomWindow").length;i++){
    value1=$(".bottomWindow:eq("+i+")");
    right1 = parseInt(value1.css("right"));
 value1.css({"right":rightAdd+right1+"px"});
  }
}