带可折叠侧边栏的引导程序4

Question

我希望创建用户可以切换的可折叠侧边栏。玩了很多次后，我已经实现了它，但是right now, it is very ugly。下面的代码：

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-md-3 collapse show" id="sidebar"> 
     <h2>I'm a sidebar</h2>  
    </nav> 
    <main class="col-md-9"> 
     <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar"></i> 
     <h2>I'm the main content</h2> 
    </main> 
    </div> 
</div> 

这样做的问题是，塌陷是垂直的，然后一旦崩溃，内容不走全宽！

Answer 1

有一个简单的方法，你不需要使用jQuery。请看下面的例子：

<div class="container-fluid"> 
    <div class="row"> 
    <nav class="col-md-3 collapse show" id="sidebar"> 
     <h2>I'm a sidebar</h2>  
    </nav> 
    <main class="col-md-9"> 
     <i class="fa fa-times" data-toggle="collapse" data-target="sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="document.getElementById(this.getAttribute('data-target')).style.display = 'none';"></i> 
     <h2>I'm the main content</h2> 
    </main> 
    </div> 
</div> 

我已经改变了data-target并增加了一个非常简单的onclick。

编辑：

进一步的改进：

<div class="container-fluid"> 
    <div class="row d-flex"> 
    <nav class="col-md-3 collapse show width" id="sidebar"> 
     <h2>I'm a sidebar</h2>  
    </nav> 
    <main class="col-md-9"> 
     <i class="fa fa-times" data-toggle="collapse" data-target="#sidebar" aria-hidden="true" aria-expanded="false" aria-controls="sidebar" onclick="var that = this; setTimeout(function() {console.log(that.parentNode);that.parentNode.style.flex = 'auto';that.parentNode.style['max-width'] = 'none';}, 2000);"></i> 
     <h2>I'm the main content</h2> 
    </main> 
    </div> 
</div>