我希望创建一个可折叠的侧边栏,用户可以切换。经过多次游戏,我已经实现了它,但是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>
这个问题是,折叠是垂直的,然后一旦崩溃,内容就不会全宽!
答案 0 :(得分:4)
有一种简单的方法,您不需要使用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>