jquery - 如何在 bootstrap 中创建垂直可点击分隔线？

Question

所以我有一个布局，左边 24% 是侧边栏菜单，右边 75% 是主要内容，左右之间是垂直分隔线或可点击的 1% 行。单击此行，左侧部分将被隐藏。并且该线将移动到屏幕的左端，右侧部分将变为 99%。如果再次点击这条线，它将再次变为 24% left 和 75% right。

如何创建这种垂直可点击线？

我只想知道垂直可点击线本身，其余部分(点击=>调整左/右部分的大小)就可以了，我知道该怎么做。

我想知道如何在 HTML 中绘制这条线？使用股利？使用垂直线图像？或者??

非常感谢大家，所以它是由CSS创建的:)

Answer 1

这是一个使用 Flexbox 和 Jquery 的解决方案

$('.right span').click(function() {
  $('.left').toggleClass('hide');
  $(this).toggleClass('bold');
});

body, html {
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  min-height: 100vh;
}

.left {
  flex: 0 0 25%;
  transition: all 0.3s ease-in;
}

.right {
  flex: 75%;
  position: relative;
  transition: all 0.3s ease-in;
}

span {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  width: 3px;
  background: black;
}

.hide {
  flex: 0 0 0px;
  overflow: hidden;
}

.bold {
  width: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="left">Left</div>
  <div class="right"><span tabindex="0"></span>Right</div>
</div>