JavaScript可折叠面板默认情况下处于打开状态 [英] Javascript collapsible panel open by default

问题描述

我正在遵循以下代码示例在此处找到，以使用CSS创建可折叠面板/html/javascript:

I am following this code example found here to create a collapsible panel using 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>

此代码有效，默认情况下，可折叠部分将被隐藏.

This code works, by default the collapsible section will be hidden.

我想将其反转，因此默认情况下会显示我的面板，但是它的行为应完全相同，单击可折叠按钮将切换打开或关闭下面的部分.

I wanted to reverse this so my panel is shown by default, but it should behave in the exact same way, clicking the collapsible button will toggle the section below open or closed.

不确定如何反转起始变量.当它开始隐藏时，我们需要在内容面板上以max-height为0开始.在javascript中，将其更改为content.scrollHeight以打开面板.

Unsure on how to reverse the starting variables. When it starts hidden, we need to start with max-height of 0 on the content panel. In the javascript this is changed to content.scrollHeight to open the panel up.

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

Here is a JSfiddle example: https://jsfiddle.net/trbk5vwg/9/

在JSfiddle中，如果在可折叠内容"和默认显示的可折叠内容"之间交换div类，则会看到切换仅以一种方式起作用.

In the JSfiddle, if you swap the div class between the "collapsible-content" and "collapsible-content-shown-by-default", you will see the toggle only works one way.

我不确定如何在CSS中获取scrollHeight，因此不确定如何初始化默认情况下要显示的面板的maxHeight(100％不起作用).

I was unsure how i would get the scrollHeight in css, and therefore unsure on how to initialize the maxHeight for the panel to be showed by default (100% didn't work).

推荐答案

快速简便的解决方案:

Quick and easy solution:

使用下面说明的逻辑(答案的底部)，我们可以通过简单地将最大高度的内联声明添加到可折叠内容" div中来解决问题:

Using the logic explained below (bottom of answer), we can solve the problem by simply adding an inline declaration of max-height to the "collapsible-content" div:

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

JavaScript解决方案:

Javascript Solution:

工作代码为:

/* 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>

为什么这些起作用:

Why these work:

您不能仅将css文件中的max-height更改为100％的原因:在您最初的JSFiddle中，单击按钮时的第一个"if语句"正在读取 content.style.maxHeight . .style 实际上读取内联css，在原始情况下，这意味着它将maxHeight读取为null.将外部CSS(非内联)更改为100％时， .style.maxHeight 函数仍将maxHeight读取为null.

The reason you can't just change max-height to 100% in the css file: in your original JSFiddle, the first "if statement" when the button clicked is reading content.style.maxHeight. .style actually reads the inline css, which in the original case, meant it read maxHeight as null. When changing the external css (not inline) to 100%, the .style.maxHeight function still reads maxHeight as null.

要在html/css中解决此问题，我们只需要将初始内联css设置为"max-height:100％"，因此 content.style.maxHeight 函数将返回正确的值

To fix this in html/css, we simply need to set the initial inline css to "max-height: 100%", thus the content.style.maxHeight function will return the correct value.

要在JS中解决此问题，我们可以使用 window.getComputedStyle(content).maxHeight ，它将读取 computing 样式(包括内联和外部CSS).因为我们不能直接更改计算样式，所以我们可以编辑内联css以覆盖最初声明的外部css( max-height:100％).当单击按钮时调用下一个"if语句"时，计算出的样式将返回内联css.

To fix this in JS, we can use window.getComputedStyle(content).maxHeight, which will read the computed style (including inline and external css). Because we cannot change the computed style directly, we can then edit the inline css to override the external css originally declared (max-height: 100%). When the next "if statement" is called on the button click, the computed style will return the inline css.

这篇关于JavaScript可折叠面板默认情况下处于打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！