Question

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

有关详细信息，请参阅代码笔 http://codepen.io/anon/pen/EaZrLB

问题：当窗口1和窗口2都被最小化，并且您单击窗口1时，窗口2标题栏会抬起而不是停留在屏幕的底部。

HTML

<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 -->

CSS：

/*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;}

JS：

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

Answer 1

而不是在右下角设置bottomBar fixed。在右下角设置bottomWindow：

更新

通过添加一些小的javascript，您可以按照自己的意愿使用它：

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"});
  }
}

<强> Working Demo

当其他人扩展时，将Divs保持在最低点

1 个答案:

更新