如何在引导程序中创建垂直的可点击分隔线？

Question

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

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

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

我想知道如何在HTML中画这条线吗？ 使用div？ 使用垂直线图像？ 要么 ？？

非常感谢大家，所以它是由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> 

Answer 2

我有一个例子。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
left lorem ipsum dolor sit amet
</div>
<div id="divider">

</div>
<div id="right">
right content lorem ipsum dolor sit amet
</div>

CSS

div {
  height:300px;
}
#left{
  width: 23%;
  float:left;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
}
.toggle-left {
  width:0% !important;
  overflow:hidden;
}

#divider {
  width:2%;
  float:left;
  background:#000;
  cursor:pointer;
}
#right {
  width:75%;
  float:left;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
}
.toggle-right {
  width: 98% !important;
}

JS

$(document).ready(function(){
    $(document).on('click','#divider',function(){
    $("#left").toggleClass('toggle-left');   
    $("#right").toggleClass('toggle-right');
  });
});

https://jsfiddle.net/4b1p8nse/1/

Answer 3

尽管您已经有了可行的解决方案，但是这里有一个引导程序。 基本上，我已将主要内容div的左边框用作垂直触发线，并将其与div叠加以提供指针（手）光标。

 $(".nav-switch").on("click", function() { var $t = $(this), v = !!$t.data("visible"); $t.data("visible", !v); $("div.nav-col").toggleClass("hidden"); if (v) { /*currently showing nav*/ $("div.main-col").removeClass("col-xs-9").addClass("col-xs-12"); } else { $("div.main-col").removeClass("col-xs-12").addClass("col-xs-9"); } }); 

 .main-col { background-color: #d39; } .nav-switch { border-left: 10px blue solid; } .nav-switch-pointer { border: 0px dotted yellow; width: 10px!important; cursor: pointer; position: absolute; top: 0; left: 0; bottom: 0; float: left; clear: none; } 

 <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-xs-3 nav-col"> this is navigation column </div> <div class="col-xs-9 main-col"> <div class="row fl-rt nav-switch" data-visible="1"> <div class="nav-switch-pointer"> &nbsp; </div> <div class="col-xs-12"> this is right column. <br/>click on blue line to hide/show nav <br/>this div will adjust its width accordingly <br/> <br/> <br/> <br/> <br/>wow! </div> </div> </div> </div> </div> 

Answer 4

我为您创建了一个简单的解决方案。 希望它能解决问题。

 $('.vd').on('click', function(){ $('.left').toggleClass('not-visible'); $('.right').toggleClass('all-visible'); }); 

 html,body{ height: 100%; } .left, .vd, .right{ display: block; float: left; height: 100%; } .left{ width: 24%; background: #f00; } .vd{ width: 1%; background: #000; cursor: pointer; } .right{ width: 75%; background: #f0f; } .animated{ -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); } .not-visible{ width: 0%; } .all-visible{ width: 99%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="left animated">Left content</div> <div class="vd"></div> <div class="right animated"> Lorem ipsum dolor sit amet, consectetur adipiscing 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. </div>