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类的基本示例。

style="width: 0px;"

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;
}

现在，对于您的情况，我不确定，因为没有给出CSS，但是在您添加的类（例如<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>）中可以包含expanded并覆盖添加的默认CSS （例如height: 100% !important或top-panel），可能类似于bottom-panel。我还发现使用2个函数或将1个参数用作参数会更容易，因此，除非您有1个按钮作为切换按钮，否则我知道它是从顶部还是底部从其直接调用。

可折叠面板宽度

1 个答案: