可折疊面板寬度

Question

我希望在折疊頂部面板時將底部面板的寬度擴展到col-md-12 ，並且當用戶再次擴展頂部面板時，底部面板的寬度又回到col-md-8 。

我在這方面還很陌生，但這是到目前為止的代碼：

 var panel = document.getElementById("panel"); var panel1 = document.getElementById("panel1"); function secondPanelResize() { if (panel.style.height <= "45") { panel1.classList.remove("col-md-8"); panel1.classList.add("col-md-12"); } else { panel1.classList.remove("col-md-12"); panel1.classList.add("col-md-8"); } } 

 <div class="panel-group col-md-12"> <div class="col-md-8" id="panel"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1" onclick="secondPanelResize()" id="collapse">Collapsible panel</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body" id="panelbody">Panel Body</div> </div> </div> </div> <div class="col-md-8" id="panel1"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse2">Collapsible panel</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse in"> <div class="panel-body" id="panelBody">Panel Body</div> </div> </div> </div> </div> 

我已經設法使頂面板關閉時擴大其寬度，但是我不知道如何在頂面板打開時減小其寬度。

Answer 1

這是使用JS添加和刪除CSS類的基本示例。

 function topPanel() { var topPanelEle = document.getElementById('topPanel') var bottomPanelEle = document.getElementById('bottomPanel') if (!topPanelEle.classList.contains('expanded')) { //To aviod multiple clicks topPanelEle.classList.add('expanded'); } bottomPanelEle.classList.remove('expanded'); } function bottomPanel() { var topPanelEle = document.getElementById('topPanel') var bottomPanelEle = document.getElementById('bottomPanel') if (!bottomPanelEle.classList.contains('expanded')) { //To aviod multiple clicks bottomPanelEle.classList.add('expanded'); } topPanelEle.classList.remove('expanded'); } 

 .top-panel { padding: 16px; background-color: red; } .bottom-panel { padding: 16px; background-color: blue; } .expanded { height: 100px; } 

 <a href="javascript:topPanel()">Expand Top Panel</a> <div id="topPanel" class="top-panel">Top Panel</div> <a href="javascript:bottomPanel()">Expand Top Panel</a> <div id="bottomPanel" class="bottom-panel">Bottom Panel</div> 

現在，對於您的情況，我不確定，因為沒有給出CSS，但是在您添加的類中（例如在我的案例中expanded了）可以包含height: 100% !important並覆蓋添加的默認CSS（例如top-panel或在我的情況下是bottom-panel ），可能類似於height: 50% 。 我還發現使用2個函數或將1個參數用作參數會更容易，因此我知道它是從頂部還是底部從其直接調用，除非您有1個按鈕作為切換按鈕。