在点击框上显示类似抽屉的滑块 [英] Display slider like drawer on clicking box

问题描述

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

I have two boxes, Now When the user clicks on LeftToRight then I have to slide content from left to right with LeftToRight box. if the user clicks on RightToLeft the I have to slide the div from right to left.

我尝试了下面的代码，但是单击按钮时无法正确显示.我想要一个抽屉.

I tried below code but it's not displaying properly when clicking on the button. I want like a drawer.

有人可以帮我解决这个问题吗?

Can anyone help me out with this issue?

$(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>

推荐答案

在框元素中添加flex-shrink:0;并为p元素定义一个固定的宽度，以避免在制作动画时产生不良影响:

Add flex-shrink:0; to box element and define a fixed width for the p element to avoid the bad effect when doing the animation:

$(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>

这篇关于在点击框上显示类似抽屉的滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！