Question

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

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

我只想知道垂直可点击线本身，休息部分（点击=＆gt;调整左/右部分）是可以的，我知道该怎么做。

我想知道如何在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

虽然你已经有了解决方案，但这里有一个带有bootstrap的解决方案。基本上我使用主内容div的左边框作为垂直触发线，并用div覆盖它以提供指针（手）光标。

＆＃13;

$(".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");
  }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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>

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

4 个答案: