Início / coding / Perguntas / 79568966
Accepted
levent001
Asked: 2025-04-11 21:37:44 +0800 CST

A tag de detalhes HTML carrega apenas o conteúdo específico que é clicado

  • 772

Estou usando a detailstag maravilhosa da seguinte maneira, que expande o conteúdo quando um link é clicado:

summary::marker {
  content: " ";
}

summary {
  color: blue;
  text-decoration: underline;
  cursor: pointer;

}
<details>
  <summary>Show Details</summary>
  <h2>HTML Details</h2>
  <p>Explanation of the topic</p>
</details>

Esta tag permite incluir todos os tipos de tags HTML, incluindo imagens a serem incluídas nos detalhes expandidos.

Por exemplo, o código acima mostrará primeiro o seguinte:

insira a descrição da imagem aqui

e quando o link "Mostrar detalhes" for clicado, o HTML será expandido para aquele tópico específico: insira a descrição da imagem aqui

Observe que na forma expandida, o termo "Teorema de Pitágoras" está em negrito, pois usei a btag.

Funciona bem.

Mas me deparei com uma situação em que uma única página contém cerca de 300 desses tópicos, e "Mostrar detalhes" para cada um deles inclui cerca de 3 arquivos de imagem cada.

Isso significa que terei cerca de 900 imagens carregadas naquela página assim que alguém a visitar. Isso não é bom, pois o carregamento será lento e o visitante poderá clicar em apenas 1 ou 2 tópicos em expansão. Portanto, não é necessário carregar todas as 900 imagens.

Eu estava procurando uma personalização que permitisse que, ao clicar no link "Mostrar Detalhes" de um tópico específico, apenas aquele HTML específico fosse carregado e exibido. Combinar AJAX/JS é uma solução, mas o AJAX tem a limitação de não fechar o link expandido anteriormente automaticamente.

Algo como combinar a detailstag e o AJAX, de modo que a expansão de uma mostre aquela imagem específica e feche a outra imagem. ( detailsa tag permite que apenas um elemento clicado seja exibido e fecha automaticamente o clicado anteriormente).

html

1 respostas

  1. Best Answer

    Bem, finalmente, aqui está a ideia mais simples: use um <template>.

    Em seguida, recupere o evento de alternância do elemento de detalhe (verificando o estado aberto) para clonar o conteúdo do modelo, que carrega a(s) imagem(ns). ;)

    veja o documento do modelo -> https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template

    Código de exemplo:

    document.querySelectorAll('details').forEach( elmD =>
  {
  elmD.addEventListener('toggle', e =>
    {
    let tempElm = elmD.querySelector('template');
    if (!tempElm || !elmD.open) return;
    elmD.append(document.importNode(tempElm.content, true));
    tempElm.remove(); // doesn't needed anymore...
    }) 
  })
    html {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }

summary::marker {
  content : '';
  }
summary {
  color           : blue;
  text-decoration : underline;
  cursor          : pointer;
  }
    <details>
  <summary>Show Details #1</summary>
  <h3> info (h3) </h3>
  <template>
    <p>
      Find this...<br>
      <img src="https://picsum.photos/id/21/200/120" alt=" alt for img a">
    </p>
    <p>
      To walk the streets...<br>
      <img src="https://picsum.photos/id/22/200/120" alt=" alt for img b">
    </p>
  </template>
</details>

<details>
  <summary>Show Details #2</summary>
  <h3> info (h3) </h3>
  <template>
    <p>
      Wash and put away<br>
      <img src="https://picsum.photos/id/23/200/120" alt="alt for img a">
    </p>
    <p>
      To avoid damage on :<br>
      <img src="https://picsum.photos/id/24/200/120" alt="alt for img b">
    </p>
  </template>
</details>

<details>
  <summary>Show Details #3</summary>
  <h3> info (h3) </h3>
  <template>
    <p>
      In case of a wild expedition<br>
      <img src="https://picsum.photos/id/25/200/120" alt=" alt for img a">
    </p>
    <p>
      Prepare for anything !<br>
      <img src="https://picsum.photos/id/26/200/120" alt=" alt for img b">
    </p>
  </template>
</details>

    Além disso, com uma limpeza, tornando-se um Event Listener inútil:

    document.querySelectorAll('details:has(template)').forEach( elmD =>
  {
  elmD.addEventListener('toggle', fctToggleDetails);
  })

function fctToggleDetails(e)
  {
  if (!this.open)
    return
    
  let tempElm = this.querySelector('template');
  this.append(document.importNode(tempElm.content, true));
  this.removeEventListener('toggle', fctToggleDetails);
  tempElm.remove();  // doesn't needed anymore...
  }
    html {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }

summary::marker {
  content : '';
  }
summary {
  color           : blue;
  text-decoration : underline;
  cursor          : pointer;
  }
    <details>
  <summary>Show Details #1</summary>
  <h3> info (h3) </h3>
  <template>
    <p>
      Find this...<br>
      <img src="https://picsum.photos/id/21/200/120" alt=" alt for img a">
    </p>
    <p>
      To walk the streets...<br>
      <img src="https://picsum.photos/id/22/200/120" alt=" alt for img b">
    </p>
  </template>
</details>

<details>
  <summary>Show Details #2</summary>
  <h3> info (h3) </h3>
  <template>
    <p>
      Wash and put away<br>
      <img src="https://picsum.photos/id/23/200/120" alt="alt for img a">
    </p>
    <p>
      To avoid damage on :<br>
      <img src="https://picsum.photos/id/24/200/120" alt="alt for img b">
    </p>
  </template>
</details>

<details>
  <summary>Show Details #3</summary>
  <h3> info (h3) </h3>
  <template>
    <p>
      In case of a wild expedition<br>
      <img src="https://picsum.photos/id/25/200/120" alt=" alt for img a">
    </p>
    <p>
      Prepare for anything !<br>
      <img src="https://picsum.photos/id/26/200/120" alt=" alt for img b">
    </p>
  </template>
</details>

    • 1

relate perguntas