在点击框上显示像抽屉一样的滑块

Question

我有两个框，现在当用户单击 LeftToRight 时，我必须使用 LeftToRight 框从左向右滑动内容。如果用户点击 RightToLeft 我必须从右向左滑动 div。

我尝试了以下代码，但单击按钮时显示不正确。我想要一个抽屉。

谁能帮我解决这个问题？

$(document).ready(function() {
  $("#clickLeft").click(function() {
    $(".leftoRightbox").animate({
      width: "toggle"
    });

    if (!$('.innerWrapper').hasClass("hidesecondbox")) {
      $('.innerWrapper').addClass('hidesecondbox');
    } else {
      $('.innerWrapper').removeClass('hidesecondbox');
    }
  });
  $("#clickRight").click(function() {
    $(".righttoLeftbox").animate({
      width: "toggle"
    });

    if (!$('.innerWrapper').hasClass("hidefirstbox")) {
      $('.innerWrapper').addClass('hidefirstbox');
    } else {
      $('.innerWrapper').removeClass('hidefirstbox');
    }
  });
});

.innerWrapper {
  text-align: center;
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
}

.displayflex {
  display: flex;
  overflow: hidden;
}

.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
  display: none;
}

.leftoRightbox,
.righttoLeftbox {
  height: 400px;
}

<div class="mainWrapper">
  <div class="innerWrapper">


    <div class="displayflex one">
      <div class="leftoRightbox">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div class="leftoRight box" id="clickLeft">
        <h2>This is slide left to right</h2>
        <p class="goback">Go Back</p>
      </div>

    </div>

    <div class="displayflex two">
      <div class="righttoLeft box" id="clickRight">
        <h2>This is slide right to left</h2>
        <p class="goback">Go Back</p>
      </div>
      <div class="righttoLeftbox">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

将flex-shrink:0;添加到box元素，并为p元素定义一个固定的宽度，避免做动画时的不良效果：

$(document).ready(function() {
  $("#clickLeft").click(function() {
    $(".leftoRightbox").animate({
      width: "toggle"
    });

    if (!$('.innerWrapper').hasClass("hidesecondbox")) {
      $('.innerWrapper').addClass('hidesecondbox');
    } else {
      $('.innerWrapper').removeClass('hidesecondbox');
    }
  });
  $("#clickRight").click(function() {
    $(".righttoLeftbox").animate({
      width: "toggle"
    });

    if (!$('.innerWrapper').hasClass("hidefirstbox")) {
      $('.innerWrapper').addClass('hidefirstbox');
    } else {
      $('.innerWrapper').removeClass('hidefirstbox');
    }
  });
});

.innerWrapper {
  text-align: center;
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  flex-shrink:0;
}

.displayflex {
  display: flex;
  overflow: hidden;
}

.leftoRightbox,
.righttoLeftbox,
.goback,
.hidefirstbox .one,
.hidesecondbox .two {
  display: none;
}
.leftoRightbox p,
.righttoLeftbox p{
  width:calc(100vw - 280px);
}

<div class="mainWrapper">
  <div class="innerWrapper">


    <div class="displayflex one">
      <div class="leftoRightbox">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <div class="leftoRight box" id="clickLeft">
        <h2>This is slide left to right</h2>
        <p class="goback">Go Back</p>
      </div>

    </div>

    <div class="displayflex two">
      <div class="righttoLeft box" id="clickRight">
        <h2>This is slide right to left</h2>
        <p class="goback">Go Back</p>
      </div>
      <div class="righttoLeftbox">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>