代码之家 › 专栏 › 技术社区 › dahui

Javascript可折叠面板默认打开

css html javascript

dahui · 技术社区 · 6 年前

我遵循这个代码示例 found here 要使用css/html/javascript创建可折叠面板,请执行以下操作:

function toggleCollapsibleSectionWithAnimation() {
  this.classList.toggle("collapsible-active");
  var buttonId = this.id;
  var sectionId = buttonId.replace("button","section");
  var content = document.getElementById(sectionId);
  if (content.style.maxHeight) {
    content.style.maxHeight = null;
  } else {
    content.style.maxHeight = content.scrollHeight + "px";
  }
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent;
  color: #444;
  cursor: pointer;
  width: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible-active, .collapsible:hover {
  text-decoration: underline;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  max-height: 0;
  padding: 10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* Style the collapsible content. Note: shown by default */
.collapsible-content-shown-by-default {
  max-height: 100%;
  padding: 10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<button class="collapsible" id="collapsible-button-0" onclick="toggleCollapsibleSectionWithAnimation.call(this)"><b>Model</b> (show/hide)</button>
<div class="collapsible-content" id="collapsible-section-0">
  <h1>
  content
  </h1>
</div>

我想反转这个,这样我的面板在默认情况下会显示,但它的行为应该完全相同,单击可折叠按钮将切换下面的部分打开或关闭。

下面是一个JSfiddle示例: https://jsfiddle.net/trbk5vwg/9/

我不确定如何在css中获得scrollHeight,因此不确定如何初始化默认显示的面板的maxHeight(100%不起作用)。

2 回复 | 直到 6 年前

Zak Avery 6 年前

快速简便的解决方案:

使用下面解释的逻辑(答案的底部),我们可以通过简单地向“可折叠内容”div添加max height的内联声明来解决问题:

<div class="collapsible-content" id="collapsible-section-0" style="max-height: 100%">

工作代码为:

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: transparent;
  color: #444;
  cursor: pointer;
  width: auto;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible-active, .collapsible:hover {
  text-decoration: underline;
}

/* Style the collapsible content. Note: hidden by default */
.collapsible-content {
  max-height: 100%;
  padding: 10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

/* Style the collapsible content. Note: shown by default */
.collapsible-content-shown-by-default {
  max-height: 100%;
  padding: 10px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<script>
	function toggleCollapsibleSectionWithAnimation() {
		this.classList.toggle("collapsible-active");
		var buttonId = this.id;
		var sectionId = buttonId.replace("button","section");
		var content = document.getElementById(sectionId);
    var mHeight = window.getComputedStyle(content).maxHeight;
		if (mHeight !== "0px"){
		  content.style.maxHeight = "0px";
		} else {
		  content.style.maxHeight = "100%";
		}
	}</script>

<button class="collapsible" id="collapsible-button-0" onclick="toggleCollapsibleSectionWithAnimation.call(this)"><b>Model</b> (show/hide)</button>
<div class="collapsible-content" id="collapsible-section-0">

<h1>
content
</h1>


</div>

不能在css文件中将max height更改为100%的原因是:在原始JSFiddle中,单击按钮时的第一个“if语句”正在读取 content.style.maxHeight . .style .style.maxHeight 函数仍将maxHeight读取为null。

要在html/css中解决这个问题,我们只需将初始的内联css设置为“max height:100%”,这样 content.style.maxHeight 函数将返回正确的值。

要在JS中解决这个问题,我们可以使用 window.getComputedStyle(content).maxHeight 计算样式(包括内联和外部css)。因为我们不能直接更改computed样式,所以我们可以编辑内联css来覆盖最初声明的外部css( max-height: 100%

PKCS12 6 年前

试试这个

<script>

    function toggleCollapsibleSectionWithAnimation() {
     this.classList.toggle("collapsible-active");

        var buttonId = this.id;
        var sectionId = buttonId.replace("button","section");
        var content = document.getElementById(sectionId);

        var isDefaultMode = content.classList.contains('collapsible-content-shown-by-default');

    if (isDefaultMode) {
      content.classList.remove("collapsible-content-shown-by-default");
      content.style.maxHeight = 0;
    }

        if (content.style.maxHeight) {
          content.style.maxHeight = null;
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
        }
    }</script>

<button class="collapsible collapsible-active" id="collapsible-button-0" onclick="toggleCollapsibleSectionWithAnimation.call(this)"><b>Model</b> (show/hide)</button>
<div class="collapsible-content collapsible-content-shown-by-default" id="collapsible-section-0">

<h1>
content
</h1>


</div>

我把它设置为基本上在点击后的模式。