有一個簡單的方法,你不需要使用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>
可以使用離子的框架。它具有導航功能和許多其他內置組件。 – Kishori