javascript - jQuery：显示侧边栏，推开主要区域

Question

这是我的代码：

$(".left-area").mouseenter(function() {
  $(".left-area-content").show();
  $(".left-area-content-preview").hide();
}).mouseleave(function() {
  $(".left-area-content").hide();
  $(".left-area-content-preview").show();
});


$(".right-area").mouseenter(function() {
  $(".right-area-content").show();
  $(".right-area-content-preview").hide();
}).mouseleave(function() {
  $(".right-area-content").hide();
  $(".right-area-content-preview").show();
});

* {
  font-size: 30px;
  font-family: Arial;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.content {
  display: flex;
  height: 100vh;
  overflow-y: scroll;
}

.left-area {
  background-color: red;
  color: white;
}

.left-area-content-preview {
  display: block;
}

.left-area-content {
  display: none;
  width: 500px;
}

.main-area {
  width: 100%;
}

.right-area {
  background-color: red;
  color: white;
}

.right-area-content {
  width: 500px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">

  <div class="left-area">
    <div class="left-area-content-preview">
      One
    </div>
    <div class="left-area-content">
      Some cool content
    </div>

  </div>

  <div class="main-area">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

  <div class="right-area">
    <div class="right-area-content-preview">
      Two
    </div>
    <div class="right-area-content">
      Some cool content
    </div>
  </div>

</div>

我需要这样的东西： http ://www.laurelhalo.com/

主要区域在悬停两个侧边栏之一时应保持其宽度，并从一侧推开。还应该有一个滑动动画，如示例中所示。

怎么可能意识到这一点？jQuery可以吗？

将非常感谢您的帮助。:)

标签： javascriptjquery

Answer 1

只需添加min-width:100%;到您的main-area班级。

$(".left-area").mouseenter(function() {
  $(".left-area-content").show();
  $(".left-area-content-preview").hide();
}).mouseleave(function() {
  $(".left-area-content").hide();
  $(".left-area-content-preview").show();
});


$(".right-area").mouseenter(function() {
  $(".right-area-content").show();
  $(".right-area-content-preview").hide();
}).mouseleave(function() {
  $(".right-area-content").hide();
  $(".right-area-content-preview").show();
});

* {
  font-size: 30px;
  font-family: Arial;
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

.content {
  display: flex;
  height: 100vh;
  overflow-y: scroll;
}

.left-area {
  background-color: red;
  color: white;
}

.left-area-content-preview {
  display: block;
}

.left-area-content {
  display: none;
  width: 500px;
}

.main-area {
  width: 100%;
  min-width:100%;
}

.right-area {
  background-color: red;
  color: white;
}

.right-area-content {
  width: 500px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="content">

  <div class="left-area">
    <div class="left-area-content-preview">
      One
    </div>
    <div class="left-area-content">
      Some cool content
    </div>

  </div>

  <div class="main-area">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

  <div class="right-area">
    <div class="right-area-content-preview">
      Two
    </div>
    <div class="right-area-content">
      Some cool content
    </div>
  </div>

</div>