2017-10-04 118 views
3

我希望創建用戶可以切換的可摺疊側邊欄。玩了很多次後,我已經實現了它,但是right now, it is very ugly。下面的代碼:帶可摺疊側邊欄的引導程序4

<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

可以使用離子的框架。它具有導航功能和許多其他內置組件。 – Kishori

回答

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

感謝@Lajos,看到更新問:我設法讓它工作,但不是好方法 – Ciwan

+0

@Ciwan你可以看看我編輯的答案。 –