javascript - 在屏幕外滑动div

我在使用此模板时遇到了一些麻烦：基本上，我正在尝试添加功能，如果您单击某个框，它将在屏幕外展开其他框，而在屏幕外滑动div时，框会完全消失。

这是我到目前为止的内容：JSFiddle。

$(function() {
  $(".box").click(function() {
    var isopened = $(this).attr("isopen");
    if (isopened == "true") {
      $(this).css("position", "relative").css("width", $(this).attr("data-ow"));
      $(this).attr("isopen", "false");
    }
    else {
      $(this).attr("data-ow", $(this).css("width"));
      $(this).css("position", "relative").css("width", "40%");
      $(this).attr("isopen", "true");
    }
  });
});

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  max-width: 100%;
  max-height: 600px;
  overflow: hidden;
}
.box {
  height: 600px;
  display: block;
  width: 13.33333333%;
  border: 1px solid white;
  background-color: black;
  float: right;
  position: relative;
}
.box:first-of-type {
  width: 29.0%;
  background-color: orange;
}
.box:last-of-type {
  width: 29.0%;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

我最终想要的是，当单击其中一个框时，它会展开，而不是隐藏整个div，而只隐藏屏幕外的部分：

最佳答案

我认为您可能喜欢此flexbox解决方案，因为您可以在不使用任何jQuery / JS的情况下完成您想做的事情。纯CSS和HTML：

body {
  background-color: black
}
#container {
  display: flex;
  width: 100%;
  height: 50vh;
}
#container > div {
  flex: 1;
  min-width: 0;
  transition:min-width 0.2s ease;
  outline:0;
}
#container > div:focus {
  min-width: 50vw;
}

<div id="container">
  <div tabindex="0" style="background-color:blue"></div>
  <div tabindex="0" style="background-color:orange"></div>
  <div tabindex="0" style="background-color:green"></div>
  <div tabindex="0" style="background-color:white"></div>
  <div tabindex="0" style="background-color:blue"></div>
</div>

我使用tabindex使我能够使用:focus选择器。