可折叠面板宽度

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 个按钮作为切换按钮。

可折叠面板宽度

Collapsible Panel Width

html

javascript

panel

collapse