Question

我正在构建一个新的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>

Answer 1

我看到您的最大高度在最后折叠时出现问题，打开时设置了固定的最大高度。打开可折叠儿童时，没有足够的空间可打开儿童。我已经将代码更改为固定的300px max-height，并且可以按预期工作。您应该计算不同的最大高度，同时还要考虑子元素。

您可以使用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>

Answer 2

之所以看不到第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>

Javascript函数无法打开嵌套可折叠

2 个答案: