Uma alternativa (com limitações, já veremos a seguir) é, sempre que clicar em um summary
, procure se já existe um vermelho (e caso exista, mude a cor de volta para a original), e depois mude a cor do elemento clicado para vermelho:
document.querySelectorAll('summary')
.forEach(s => s.addEventListener('click', function(event) {
const vermelhoAtual = document.querySelector('summary[style="color: red;"]');
if (vermelhoAtual) vermelhoAtual.style.color = 'inherit';
s.style.color = 'red';
})
);
<html>
<body>
<details>
<summary>Title 1</summary>
<p>Content 1</p>
</details>
<details>
<summary>Title 2</summary>
<p>Content 2</p>
</details>
<details>
<summary>Title 3</summary>
<p>Content 3</p>
</details>
<details>
<summary>Title 4</summary>
<p>Content 4</p>
</details>
</body>
</html>
Como a ideia é que somente um summary
por vez pode ser vermelho, não precisaria fazer um loop por todos, como sugeriu a outra resposta (que é uma alternativa mais geral, caso tivesse a possibilidade de ter mais de um elemento vermelho, aí faria mais sentido percorrer todos e mudar a cor um a um - se bem que bastaria trocar querySelector
por querySelectorAll
no código acima, para buscar somente os elementos vermelhos).
Enfim, se é garantido que somente um elemento será vermelho por vez, basta buscar por ele, usando o seletor 'summary[style="color: red;"]'
, e mudar a cor caso ele exista.
Mas como já dito no início, esta solução é um pouco limitada.
A limitação é que isso só funciona se o elemento não tiver outros estilos inline. Por exemplo, se tiver style="font-weight: bold; color: red;
, ou até mesmo se tiver style="color: red"
(sem o ponto-e-vírgula), o seletor já não pega mais o elemento.
Daria até para contornar com document.querySelectorAll('summary[style*="color: red"]')
(repare no *=
em vez de apenas =
, veja aqui alguns exemplos e a documentação para mais detalhes), mas aí talvez seja melhor usar classes e buscar pelos elementos que possuem aquela classe, por exemplo.
Uma outra alternativa é guardar o elemento vermelho, assim não precisamos buscá-lo toda hora (novamente, assumindo que não pode ter mais de um vermelho ao mesmo tempo):
var vermelhoAtual = undefined;
document.querySelectorAll('summary')
.forEach(s => s.addEventListener('click', function(event) {
if (s == vermelhoAtual) return; // cliquei no mesmo elemento, não precisa fazer nada
if (vermelhoAtual) vermelhoAtual.style.color = 'inherit';
s.style.color = 'red';
vermelhoAtual = s;
})
);
<html>
<body>
<details>
<summary>Title 1</summary>
<p>Content 1</p>
</details>
<details>
<summary>Title 2</summary>
<p>Content 2</p>
</details>
<details>
<summary>Title 3</summary>
<p>Content 3</p>
</details>
<details>
<summary>Title 4</summary>
<p>Content 4</p>
</details>
</body>
</html>