主页 / coding / 问题 / 79527701
Accepted
Pragmateek
Asked: 2025-03-23 00:00:26 +0800 CST

确保并非所有具有相同父级的可折叠元素都被隐藏

  • 772

data-bs-toggle="collapse"我有一组可折叠元素，其可见性通过/控制data-bs-target，并且在给定时间内只有一个元素可见。

此行为是通过 实现的data-bs-parent。

问题是当前可见元素仍然可以折叠，因此之后没有任何元素可见。

如何防止当前可见元素折叠？
仅当另一个元素可见时才应折叠元素。

例如在示例中：一开始#1是可见的，如果我单击控制跨度，它会被隐藏，因此不再有任何内容可见，只要没有其他内容可见，它就应该保持可见。

span[data-bs-toggle] { cursor : pointer; }
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<span data-bs-toggle="collapse" data-bs-target="#content1">#1</span>
<span data-bs-toggle="collapse" data-bs-target="#content2">#2</span>
<span data-bs-toggle="collapse" data-bs-target="#content3">#3</span>
<div id="container">
  <span id="content1" class="collapse show" data-bs-parent="#container">#1+</span>
  <span id="content2" class="collapse" data-bs-parent="#container">#2+</span>
  <span id="content3" class="collapse" data-bs-parent="#container">#3+</span>
</div>

html

1 个回答

  1. Best Answer

    您需要使用 JavaScript 来执行此操作，它将根据您的逻辑切换元素，这意味着您还需要使用 JavaScript 初始化 BS 可折叠元素。

    因此，如果目标已经显示，则需要阻止切换。您可以为每个切换器添加点击监听器，找到相应的目标，检查它是否已经显示，如果没有显示，则切换：

    // initialize collapsibles, do not toggle initially
const collapseElementList = document.querySelectorAll('.collapse');

const collapseList = [...collapseElementList].map(collapseEl => (new bootstrap.Collapse(collapseEl, {
    toggle: false,
    parent: '#container'
})));

// add click listeners to each toggler
// toggle only if its target isn't already shown
const btns = document.querySelectorAll('span').forEach((btn, i) => {
    btn.addEventListener('click', e => {
        if (!collapseList[i]._element.classList.contains('show')) collapseList[i].toggle();
    });
});

    演示：

    // initialize collapsibles, do not toggle initially
const collapseElementList = document.querySelectorAll('.collapse');

const collapseList = [...collapseElementList].map(collapseEl => (new bootstrap.Collapse(collapseEl, {
    toggle: false,
    parent: '#container'
})));

// add click listeners to each toggler
// toggle only if its target isn't already shown
const btns = document.querySelectorAll('span').forEach((btn, i) => {
    btn.addEventListener('click', e => {
        if (!collapseList[i]._element.classList.contains('show')) collapseList[i].toggle();
    });
});
    span[data-bs-toggle] {
  cursor: pointer;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

<span data-bs-target="#content1">#1</span>
<span data-bs-target="#content2">#2</span>
<span data-bs-target="#content3">#3</span>
<div id="container">
  <span id="content1" class="collapse show">#1+</span>
  <span id="content2" class="collapse">#2+</span>
  <span id="content3" class="collapse">#3+</span>
</div>

    • 1

相关问题