Come creare: elementi dell'elenco chiudibili

Scopri come chiudere gli elementi dell'elenco utilizzando JavaScript.

Come creare un elenco di elementi chiudibili

Passo 1 - Aggiungi HTML:

<ul>
  <li>Adele</li>
  <li>Agnes<span class="close">x</span></li>
  <li>Billy<span class="close">x</span></li>
  <li>Bob<span class="close">x</span></li>
  <li>Calvin<span class="close">x</span></li>
  <li>Christina<span class="close">x</span></li>
  <li>Cindy</li>
</ul>

Secondo passo - Aggiungi CSS:

* {
  box-sizing: border-box;
}
/* Imposta lo stile della lista (rimuove i margini e gli elenchi di punti, ecc.) */
ul {
  type_di_elenco: none;
  padding: 0;
  margin: 0;
}
/* Imposta lo stile degli elementi della lista */
ul li {
  bordo: 1px solid #ddd;
  margin_cima: -1px; /* Previene i bordi a双边框 */
  colore_di_sfondo: #f6f6f6;
  padding: 12px;
  decoration_del_testo: none;
  dimensione_del_carattere: 18px;
  colore: nero;
  display: blocco;
  position: relativo;
}
/* Aggiungi colore di sfondo grigio chiaro quando il mouse è sopra */
ul li:hover {
  colore_di_sfondo: #eee;
}
/* Imposta lo stile del pulsante di chiusura (span) */
.close {
  cursor: puntatore;
  position: assoluto;
  cima: 50%;
  destra: 0%;
  padding: 12px 16px;
  trasform: translate(0%, -50%);
}
.close:hover {background: #bbb;}

Terzo passo - Aggiungi JavaScript:

// 获取所有 class="close" 的元素
var closebtns = document.getElementsByClassName("close");
var i;
// 遍历元素，并在单击时隐藏父元素
for (i = 0; i < closebtns.length; i++) {
  closebtns[i].addEventListener("click", function() {
    this.parentElement.style.display = 'none';
  });
}

Prova personalmente