css 如何折叠所有带有父元素的嵌套元素？

0vvn1miw 于 2023-01-14 发布在其他

关注(0)|答案(2)|浏览(112)

我得到了一个折叠元素，其中包含一些嵌套的折叠元素。
我试图确保当父元素折叠时，内部嵌套项也会折叠。查看嵌套项时，它看起来确实折叠了，但当我重新打开父元素时，嵌套项并没有折叠。
我添加了data-bs-parent属性，但似乎没有效果。
有什么明显的原因吗？
我在这里重现了这个例子-https://codepen.io/s89_/pen/vYamvzg

<div class="row module accordion-toggle collapsed" role="button" data-bs-toggle="collapse"
     data-bs-target="#module-test" aria-expanded="false" aria-controls="module-test">
  <h2>
    <div>
      <div><h3>Collapse</h3></div>
    </div>
  </h2>
  <div id="module-test" class="collapse">
          <div class="row group accordion-toggle collapsed d-flex" data-permissions-collapse-target="group"
           role="button" data-bs-toggle="collapse" data-bs-target="#group-test_events" aria-expanded="false"
           aria-controls="group-test_events" data-bs-parent="#module-test">
        <h2>
          <div>
            <div><h3>Nested collapse item</h3></div>
          </div>
        </h2>
        <div id="group-test_events" class="collapse">
          <div class="">
            Nested collapse contents
          </div>
        </div>
      </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75096958/how-can-i-collapse-all-nested-elements-with-parent

2条答案

按热度按时间

kr98yfug1#

您只需要使用JavaScript（Bootstrap 5不使用jQuery）来关闭子节点，因为data-bs-parent属性不适用于此行为...

const myCollapsible = document.getElementById('module-test')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
   // close children
   event.target.querySelectorAll('.collapse').forEach(element => {
       const bc = bootstrap.Collapse.getOrCreateInstance(element)
       bc.hide()
   })
})

https://codeply.com/p/mJYXqUDGm6

赞(0）回复(0）举报 2023-01-14

3b6akqbq2#

引导5 -折叠（自动折叠后代）

首先，我稍微修改了一下你的html，使它更简单。

折叠切换：

这是一个折叠切换：

<div class="collapse-toggle" data-bs-toggle="collapse" data-bs-target="#item">

分别具有属性data-bs-toggle和data-bs-target，以使其成为折叠切换，并定义相应折叠内容的目标选择器。
我还设置了自定义类collapse-toggle，使其具有选择要切换的元素的条件。

折叠内容：

这是一个折叠内容：

<div id="content" class="collapse-content collapse">

首先设置一个id，这样切换就有了一个目标选择器的条件。我尝试使用:scope + *来定位下一个兄弟，但没有成功。不使用其id来寻址元素的最接近的解决方案是这里（https://stackoverflow.com/a/12809794/1221208）。
类collapse告诉我希望默认情况下折叠该元素。
我还设置了定制类collapse-content，使其具有选择内容元素的条件。

通过js - event hidden.bs.collapse自动折叠后代

然后，为了对当前正在折叠的内容的后代执行自动折叠，我对hidden.bs.collapse事件使用了js方法，如下所述（https：//getbootstrap.com/docs/5.0/components/collapse/#methods）
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何折叠所有带有父元素的嵌套元素？

2条答案

引导5 -折叠（自动折叠后代）

折叠切换：

折叠内容：

通过js - event hidden.bs.collapse自动折叠后代

相关问题

热门标签

最新问答