Início / coding / Perguntas / 79527701
Accepted
Pragmateek
Asked: 2025-03-23 00:00:26 +0800 CST

Garantir que nem todos os elementos recolhíveis com o mesmo pai estejam ocultos

  • 772

Tenho um conjunto de elementos recolhíveis cuja visibilidade é controlada via data-bs-toggle="collapse"/ data-bs-target, e apenas um deve estar visível em um determinado momento.

Esse comportamento é obtido com data-bs-parent.

O problema é que o elemento atualmente visível ainda pode ser recolhido, portanto, nenhum elemento fica visível depois.

Como evitar o colapso do elemento visível no momento?
Os elementos devem ser recolhidos somente quando outro for tornado visível.

por exemplo, no exemplo: no início #1é visível, se eu clicar no intervalo de controle ele fica oculto, portanto nenhum conteúdo fica mais visível, ele deve permanecer visível enquanto nenhum outro conteúdo estiver visível.

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 respostas

  1. Best Answer

    Você precisará fazer isso com JavaScript, que alternará os elementos de acordo com sua lógica, o que significa que você também precisará inicializar os BS collapsibles com JavaScript.

    Então, você precisa evitar a alternância, se o alvo já estiver sendo exibido. Você pode adicionar ouvintes de clique a cada toggler, encontrar o alvo correspondente, verificar se ele já está sendo exibido e, então, alternar se não estiver:

    // 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();
    });
});

    demonstração:

    // 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

relate perguntas