Javascript函数不打开嵌套可折叠答案

【问题标题】：Javascript function doesn't open nested collapsibleJavascript函数不打开嵌套可折叠
【发布时间】：2019-01-14 05:28:33
【问题描述】：

我正在构建一个新的 html 网页，我将在其中嵌套可折叠项。我正在使用 W3school 的代码。我不明白为什么当嵌套可折叠时嵌套的在单击时不会打开。

在我的第 1 章示例中，当单击按钮时，可折叠项变为活动状态并为其内容提供最大高度。然而，当第 1.1 章被点击时，它的可折叠变为活动状态并为内容提供高度，但内容无法看到。

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 article page content */

#main {
  background: #F4F4F4;
  margin: 0 auto;
  max-width: 1024px;
}

#page {
  margin-top: 5em;
  background-color: white;
  padding: 15px 3em 15px 3em;
}

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

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="main">

    <p>Article 1</p>
    <button class="collapsible">Abstract</button>
    <div class="content">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet.
        Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque
        turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam
        dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec
        sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis,
        id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque
        sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus
        pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices
        nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at
        tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc,
        at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie,
        tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p>
    </div>
    <button class="collapsible">Introduction</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">Chapter 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>
      <button class="collapsible">Chapter 1.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>
      </div>
    </div>
  </div>

</body>

</html>

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

您没有看到第 1.1 章内容的原因是父级可折叠的最大高度。当情况适用时，您可能需要考虑更改父级最大高度。

接下来可以看JS上的例子。

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

      if (content.parentElement.className == "content") {
        let parent = content.parentElement;
        let parentHeight = parent.style.getPropertyValue("max-height").replace("px");
        let newParentHeight = parseInt(parentHeight) + parseInt(content.scrollHeight);

        parent.style.setProperty("max-height", `${newParentHeight}px`);
      }
    }
  });
}

/* Style article page content */

#main {
  background: #F4F4F4;
  margin: 0 auto;
  max-width: 1024px;
}

#page {
  margin-top: 5em;
  background-color: white;
  padding: 15px 3em 15px 3em;
}

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

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="main">

    <p>Article 1</p>
    <button class="collapsible">Abstract</button>
    <div class="content">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet.
        Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque
        turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam
        dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec
        sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis,
        id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque
        sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus
        pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices
        nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at
        tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc,
        at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie,
        tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p>
    </div>
    <button class="collapsible">Introduction</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">Chapter 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>
      <button class="collapsible">Chapter 1.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>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：

【解决方案2】：

我发现您在最后一个折叠式中的最大高度存在问题，当您打开它时设置了固定的最大高度。打开儿童折叠式时，没有足够的空间让儿童打开。我已将代码更改为固定 300px 最大高度，它按预期工作。您应该计算 max-height different 以考虑子元素。

您可以使用 max-height 将其设置为大于您的内容的某个值，以使其始终有效。查看从 max-height:0 到 max-height:auto 的动画选项这里：How can I transition height: 0; to height: auto; using CSS?

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 = "300px";
    }
  });
}

/* Style article page content */

#main {
  background: #F4F4F4;
  margin: 0 auto;
  max-width: 1024px;
}

#page {
  margin-top: 5em;
  background-color: white;
  padding: 15px 3em 15px 3em;
}

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

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="jquery-3.3.1.min.js"></script>
</head>

<body>
  <div id="main">

    <p>Article 1</p>
    <button class="collapsible">Abstract</button>
    <div class="content">
      <p>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis lacinia neque ac bibendum. Vivamus consectetur, purus et semper vehicula, nisi nunc maximus metus, sit amet convallis metus est a nisi. Cras ut orci non lacus venenatis imperdiet.
        Curabitur condimentum vulputate mattis. Pellentesque vitae sodales massa. Vivamus a ullamcorper nunc. Integer ultrices commodo lorem in iaculis. Nulla cursus vitae odio vitae ultricies. Donec ligula nisi, maximus quis metus ac, viverra pellentesque
        turpis. In suscipit mi at lorem varius pulvinar. Quisque tincidunt leo sed finibus viverra. Vestibulum pharetra condimentum leo. Aliquam tortor arcu, viverra a dui et, hendrerit auctor magna. Proin dictum pulvinar lectus ac tristique. Aliquam
        dictum condimentum massa a tincidunt. Etiam ultricies luctus finibus. Suspendisse feugiat risus cursus nisl viverra sagittis. In commodo diam tristique erat varius, ac rutrum leo molestie. Donec ut lectus tincidunt tortor vestibulum molestie nec
        sed ante. Curabitur vitae neque laoreet, faucibus ante nec, egestas nulla. Ut id mi enim. Pellentesque posuere, dolor sit amet gravida congue, justo quam pulvinar lectus, sed malesuada quam felis sed nisi. Donec auctor purus non dolor sagittis,
        id rutrum velit tempor. Aliquam non mattis nibh, nec feugiat metus. Vestibulum accumsan turpis est, porta tempor nunc gravida a. Nam eros ante, eleifend nec augue sit amet, feugiat auctor mauris. Nulla facilisi. Nulla eget egestas risus. Quisque
        sit amet rutrum ligula, dictum consequat eros. Morbi elementum libero a nunc viverra, sit amet cursus sem eleifend. Praesent neque lorem, suscipit in augue id, efficitur faucibus nibh. Vivamus vel nulla at tortor feugiat sollicitudin. Phasellus
        pharetra hendrerit massa eget ornare. Nullam tortor sapien, laoreet sed consequat at, egestas sit amet erat. Praesent in varius tellus. Ut venenatis, augue sit amet faucibus tristique, velit lacus ultrices magna, quis accumsan metus purus ultrices
        nibh. Donec dapibus tellus eu pharetra viverra. Nullam varius mollis velit, quis consequat diam venenatis et. Maecenas interdum, velit vel gravida euismod, enim orci lobortis justo, quis lobortis libero eros venenatis est. Sed laoreet, diam at
        tempus sollicitudin, sapien velit gravida elit, ut sodales augue elit eu elit. Morbi sit amet porta neque. Maecenas mi augue, maximus vitae facilisis at, volutpat at quam. Nunc ac ante tempus nibh ornare euismod. Curabitur sagittis egestas nunc,
        at pretium magna blandit vitae. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin nisl eros, rutrum ac gravida nec, gravida a erat. Morbi fringilla facilisis velit eget pharetra. Aliquam molestie,
        tellus fermentum sagittis egestas, ex neque sodales justo, non eleifend lacus risus ut velit. </p>
    </div>
    <button class="collapsible">Introduction</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">Chapter 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>
      <button class="collapsible">Chapter 1.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>
      </div>
    </div>
  </div>

</body>

</html>

【讨论】：