Início / coding / Perguntas / 79570283
Accepted
Baa My
Asked: 2025-04-12 17:56:48 +0800 CST

O símbolo do acordeão não muda quando o acordeão é clicado

  • 772

Estou enfrentando um problema com o código abaixo, pois se eu clicar em um acordeão, ele abrirá, mas o símbolo do ícone "+" não se transformará em "-" quando for aberto. O trecho de código abaixo não está sendo ativado.

javascript

2 respostas

  1. Best Answer

    Você simplesmente esqueceu de alternar a activeclasse no script js e fazer um loop pelos outros acordeões para removê-los primeiro. Com base na sua lógica, você está adicionando uma classe ativa ao acordeão para poder alterá-la com o css sempre que abrir um dos acordeões.

    A lógica é que você pega todos os acordeões e todos os painéis, faz um loop por todos eles accordionspara adicionar o ouvinte de eventos de clique: você adiciona a + or -vitrine adicionando a activeclasse somente ao destino e a remove dos outros itens não alvo, e então você faz a lógica que você já fez, que é adicionar a classe aberta somente ao destino e alterná-la dos outros itens.

    const accordionEls = document.querySelectorAll('.accordion')
const panelEls = document.querySelectorAll('.panel')

accordionEls.forEach((acc) => {
    acc.addEventListener('click', ({ target }) => {
        target.classList.toggle('active')
        accordionEls.forEach(accordionEl => {
            if (accordionEl !== target) {
                accordionEl.classList.remove('active')
            }
        })
        const { nextElementSibling } = target
        panelEls.forEach(panelEl => {
            if (panelEl !== nextElementSibling) {
                panelEl.classList.remove('open')
            } else {
                panelEl.classList.toggle('open')
            }
        })
    }) 
})

    também o estado ativo do seu css do acordeão precisa de uma pequena correção apenas para ajustar a orientação do+ or -

    .accordion.active::after {
    /*rest of your code*/
    transform: rotate(180deg); 
    /*rest of your code*/
}
    • 2

  2. Assim como na minha resposta sobre abertura/fechamento, você pode usar o <details>elemento . O elemento de resumo é um elemento de lista e pode ser estilizado como um elemento de lista. Portanto, quando o elemento de detalhes estiver aberto, estilize o elemento de resumo de acordo.

    body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: White;
  font-family: Sakkal Majalla;
  direction: rtl;
  position: relative;
  z-index: -2;
  -ms-overflow-style: none;

}

body::-webkit-scrollbar,
body::-webkit-scrollbar-button {
  display: none;
}

/* Chrome */


li {
  list-style: none;
}

a {
  text-decoration: none;
}

.main {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

table {
  border: 1px solid #dededf;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 1px;
  text-align: center;
}

th {
  border: 1px solid #dededf;
  background-color: #eceff1;
  color: #000000;
  padding: 5px;
}

td {
  border: 1px solid #dededf;
  background-color: #ffffff;
  color: #000000;
  padding: 5px;
}

th:nth-child(1) {
  width: 30.9rem;
}

th:nth-child(2) {
  width: 10rem;
}

th:nth-child(3) {
  width: 7rem;
}

summary {
  background-color: #ffffff;
  color: black;
  font-weight: bold;
  cursor: pointer;
  margin-top: 20px;
  padding: 18px;
  border: none;
  text-align: right;
  outline: none;
  font-size: 20px;
  width: 50rem;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 8px;
  box-shadow: rgba(100, 100, 111, 0.123) 0px 7px 29px 0px;
  list-style-type: "+";
}

details:open summary {
  list-style-type: "⁃";
}

details:open>summary,
details summary:hover {
  border-radius: 8px 8px 0px 0px;
  border-color: rgb(0, 128, 255);
}

.accordion span {
  float: left;
  font-size: 15px;
  color: #116ce4;
}

details .panel {
  margin-top: .5em;
}

details {
  interpolate-size: allow-keywords;
}

details::details-content {
  overflow: hidden;
  transition: block-size .5s, content-visibility 1s allow-discrete;
  overflow: hidden;
  block-size: 0;
}

details:open::details-content {
  block-size: auto;
}
    <div class="main">
  <details name="accordion">
    <summary>John Doe</summary>
    <div class="panel">
      <table>
        <th>company</th>
        <th>department</th>
        <th>2025?</th>
        <tr>
          <td>COMPANY A</td>
          <td>FINANCE</td>
          <td>&#9989;</td>
        </tr>
        <tr>
          <td>COMPANY Z</td>
          <td>PMO</td>
          <td>&#10060;</td>
        </tr>
      </table>
    </div>
  </details>
  <details name="accordion">
    <summary>John Doe</summary>
    <div class="panel">
      <table>
        <th>company</th>
        <th>department</th>
        <th>2025?</th>
        <tr>
          <td>COMPANY A</td>
          <td>FINANCE</td>
          <td>&#9989;</td>
        </tr>
        <tr>
          <td>COMPANY Z</td>
          <td>PMO</td>
          <td>&#10060;</td>
        </tr>
      </table>
    </div>
  </details>
  <details name="accordion">
    <summary>John Doe</summary>
    <div class="panel">
      <table>
        <th>company</th>
        <th>department</th>
        <th>2025?</th>
        <tr>
          <td>COMPANY A</td>
          <td>FINANCE</td>
          <td>&#9989;</td>
        </tr>
        <tr>
          <td>COMPANY Z</td>
          <td>PMO</td>
          <td>&#10060;</td>
        </tr>
      </table>
    </div>
  </details>
</div>

    • 1

relate perguntas