动画可折叠内部动画可折叠不起作用

时间：2019-06-24 00:41:13

标签： javascript

我正在测试animated collapsibles的 W3Schools 示例。

滑动/ animated collapsible示例可以正常工作，但是我需要在可折叠对象内部开发一个可折叠对象（我们可以将其命名为“递归可折叠对象”）。

我对原始示例的修改只是在初始Open Section 1可折叠对象内部添加了一个可折叠对象，该可折叠对象输出了一个简单的“ The Lorem ipsum ...等，”文本：

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "px";
    } 
  });
}
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Collapsible inside collapsible:</p>
	<button class="collapsible">Open Collapsible inside Collapsible</button>
	<div class="content">
		<p>The Lorem ipsum... etc, thing.</p>
	</div>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

如何重现错误：

1 .- 点击Open Section 1。可以。
2 .- 。点击Open Collapsible inside Collapsible。不工作

好奇的详细信息：

1 .- 点击Open Section 1。可以。
2 .- 。点击Open Collapsible inside Collapsible。不起作用。
3 .- 。点击Open Section 1。可以正常工作（可折叠关闭）。
4 .- 。点击Open Section 1。正常工作，并且内部可折叠现在正确打开。

我如何解决此问题，以使可折叠对象内部的可折叠对象正常工作？

更多笔记：

  • 在 W3Schools 上的not animated可折叠示例似乎正常工作，并且在递归执行时没有此问题（可折叠内部的可折叠）。

3 个答案:

答案 0 :(得分：0)

您的代码的问题是这一行

content.style.maxHeight = content.scrollHeight + "px";

由于您是根据可折叠内部的内容设置最大高度，因此，第一次扩展时，嵌套的折叠尚未打开，因此最大高度正好达到嵌套点可折叠标题。如果单击嵌套标题，则将其打开，但是由于限制了父级的高度，任何溢出都将被隐藏（我认为它仍然存在，在其他可折叠标题的下面）。如我所见，您有两种方法可以解决此问题：

  1. 执行this。这将为您的内容增加一个偏移量，使您的内容可以更多地扩展以为嵌套提供空间。很好，但是您需要知道使偏移量更好的深度（高度）。
  2. 在CSS的overflow: auto类中添加.content。这样做的好处是，您无需像其他情况一样指定所需的正确高度，但是这在设计上有点隐蔽，因为您可能没有注意滚动条（在Mac上）

您选择的人；）

答案 1 :(得分：0)

您从原始W3教程更改了脚本。使用原件：

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>

答案 2 :(得分：0)

您可以在max-height节中创建max-content，而不必将其设置为特定的计算大小。

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = 'max-content';
    } 
  });
}
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}
</style>
<h2>Animated Collapsibles</h2>

<p>A Collapsible:</p>
<button class="collapsible">Open Collapsible</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<p>Collapsible Set:</p>
<button class="collapsible">Open Section 1</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>Collapsible inside collapsible:</p>
	<button class="collapsible">Open Collapsible inside Collapsible</button>
	<div class="content">
		<p>The Lorem ipsum... etc, thing.</p>
	</div>
</div>
<button class="collapsible">Open Section 2</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="collapsible">Open Section 3</button>
<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

相关问题
最新问题