在幕外滑动div

Question

我在使用这个模板时遇到了一些麻烦：基本上，我正在尝试添加功能，如果你点击一个框，它会扩展滑动其他的屏幕外，而是滑动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，只隐藏屏幕外的部分：

Answer 1

我认为你可能会喜欢这个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选择器。