javascript - 在屏幕外滑动 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 选择器。