另一个可折叠部分中的可折叠部分不会充分展开

新人

在以下代码中,我在另一个可折叠部分中有一个可折叠部分。当我打开最外面的可折叠部分时,它工作正常并向我显示它下面的内容。但是当我尝试打开内部可折叠部分时,它不会扩展到足以让我看到所有内容。请运行以下程序以查看问题。

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";
    } 
  });
}
.collapsible {
  background-color: #2d2e2e;
  color: white;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

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

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

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

.collapse_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;

}
<button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
  <button class="collapsible">Open Section 1</button>
  <div class="collapse_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 2</button>
  <div class="collapse_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.</p>
  </div>
  <button class="collapsible">Open Section 3</button>
  <div class="collapse_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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

瓦诺姆

如果不需要动画,您可以设置max-heightfit-content

否则,您可以将元素添加scrollHeight到其父元素的高度中。并且为了避免设置太大的数字(如果同一个子项被多次打开/关闭),您可以添加transitionend甚至侦听器来设置max-height父项的正确设置

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

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

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

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

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

.collapse_content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.1s ease-out;
}
<button class="collapsible">Full Collapsible Set:</button>
<div class="collapse_content">
  <button class="collapsible">Open Section 1</button>
  <div class="collapse_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 2</button>
  <div class="collapse_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.</p>
  </div>
  <button class="collapsible">Open Section 3</button>
  <div class="collapse_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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从另一个可折叠项[js]中的链接展开可折叠项?

Bootstrap面板在另一个可折叠面板中折叠不正确的图标和可折叠面板

Bootstrap 可折叠面板不会在另一个面板开口上折叠

jQuery 复选框更改事件以通过另一个复选框展开可折叠

将ListView项从一个可折叠对象拖到另一个

在 hugo 中添加可折叠部分

嵌套在另一个中的可折叠 div 块以重新调整整个块的最大高度

如何在此示例可折叠部分中将默认显示从折叠更改为展开

当另一个打开时,如何使纯HTML-&-CSS可折叠面板保持打开状态?

通过链接打开可折叠部分

实现可折叠部分的 HTML 代码

单击另一个菜单时,AdminLTE 3展开菜单不会关闭/折叠

需要一个简单的可折叠Gizmo

Html 可折叠不会在点击时展开

Swift 5 UITableViewCell:展开一个部分并折叠展开的部分

当一个<ListItem>组件在<List>下展开时,如何确保其他<ListItem>组件可折叠?

如何在Qt中制作一个可扩展/可折叠的小部件

如何在同一个div中创建可折叠的侧边栏?

实现可折叠:如何确定哪个部分是打开的?

如何使用 NativeScript 仅展开可折叠列表中的一项

使用JavaScript展开/隐藏可折叠

在Haskell中实现可折叠

R中的可折叠树

jquery中的可折叠菜单

Markdown 中的可折叠表格

如何在angularjs中保持可折叠div的第一部分

Word 2016-如何使在导航窗格中不可见的可折叠部分?

标题中的jQuery移动可折叠按钮,停止折叠/展开

D3.js可折叠树-展开/折叠节点