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

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

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

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

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

---

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

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

$（'.vd'）。在（'click'，function（）上{
$（'.left'）.toggleClass（'not-visible'）；
$（'.right'）.toggleClass（'all-visible'）；
});
html，正文{
身高：100%；
}
.左，.vd，.右{
显示：块；
浮动：左；
身高：100%；
}
.左{
宽度：24%；
背景：#f00；
}
.vd{
宽度：1%；
背景：#000；
光标：指针；
}
.对{
宽度：75%；
背景：#f0f；
}
.动画{
-webkit过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
-moz过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
-o型过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
}
.不可见{
宽度：0%；
}
.全部可见{
宽度：99%；
}

左内容
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
我为您创建了一个简单的解决方案。希望它能奏效


$（'.vd'）。在（'click'，function（）上{
$（'.left'）.toggleClass（'not-visible'）；
$（'.right'）.toggleClass（'all-visible'）；
});
html，正文{
身高：100%；
}
.左，.vd，.右{
显示：块；
浮动：左；
身高：100%；
}
.左{
宽度：24%；
背景：#f00；
}
.vd{
宽度：1%；
背景：#000；
光标：指针；
}
.对{
宽度：75%；
背景：#f0f；
}
.动画{
-webkit过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
-moz过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
-o型过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
过渡：所有500ms立方贝塞尔（0.190,1.000,0.220,1.000）；
}
.不可见{
宽度：0%；
}
.全部可见{
宽度：99%；
}

左内容
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
我举了一个例子

HTML

JS

我举了一个例子

HTML

JS

这里有一个解决方案，使用了Flexbox和Jquery


$（'.right span'）。单击（函数（）{
$（'.left'）.toggleClass（'hide'）；
$（this.toggleClass（'bold'）；
});
body，html{
保证金：0；
填充：0；
}
.内容{
显示器：flex；
最小高度：100vh；
}
.左{
弹性：0.25%；
过渡：所有0.3秒都容易进入；
}
.对{
弹性：75%；
位置：相对位置；
过渡：所有0.3秒都容易进入；
}
跨度{
位置：绝对位置；
高度：100vh；
排名：0；
左：0；
宽度：3倍；
背景：黑色；
}
.隐藏{
flex:0px；
溢出：隐藏；
}
.bold{
宽度：6px；
}

左边
赖特
这里有一个使用Flexbox和Jquery的解决方案


$（'.right span'）。单击（函数（）{
$（'.left'）.toggleClass（'hide'）；
$（this.toggleClass（'bold'）；
});
body，html{
保证金：0；
填充：0；
}
.内容{
显示器：flex；
最小高度：100vh；
}
.左{
弹性：0.25%；
过渡：所有0.3秒都容易进入；
}
.对{
弹性：75%；
位置：相对位置；
过渡：所有0.3秒都容易进入；
}
跨度{
位置：绝对位置；
高度：100vh；
排名：0；
左：0；
宽度：3倍；
背景：黑色；
}
.隐藏{
flex:0px；
溢出：隐藏；
}
.bold{
宽度：6px；
}

左边
赖特
虽然您已经找到了可行的解决方案，但这里有一个带引导的解决方案。基本上，我使用了主内容div的左边框作为垂直触发线，并将其与div重叠以提供指针（手）光标


$（“.nav开关”）。打开（“单击”，函数（）{
var$t=$（此），
v=！！$t.数据（“可见”）；
$t.data（“可见”、！v）；
$（“div.nav-col”）。切换类别（“隐藏”）；
如果（v）{
/*当前显示导航*/
$（“div.main-col”）.removeClass（“col-xs-9”）.addClass（“col-xs-12”）；
}否则{
$（“div.main-col”）.removeClass（“col-xs-12”）.addClass（“col-xs-9”）；
}
});
.main列{
背景色：#d39；
}
.导航开关{
左边框：10px蓝色实心；
}
.导航开关指针{
边框：0px点黄色；
宽度：10px！重要；
光标：指针；
位置：绝对位置；
排名：0；
左：0；
底部：0；
浮动：左；
明确：无；
}

这是导航栏
这是右栏。

单击蓝线以隐藏/显示导航

此div将根据
<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>

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

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