Il tag dei dettagli in HTML5 e l’implementazione jQuery

Last updated Feb 1, 2023

HTML5

Secondo W3school, HTML5 ha aggiunto un nuovo tag, dettagli. Il suo utilizzo di esempio è:

<details>
  <summary>Computing & Technology.</summary>
  <a class="vglnk" target="_blank" href="https://helloacm.com" rel="nofollow"><span>https</span><span>://</span><span>helloacm</span><span>.</span><span>com</span></a>
</details>

Se il tuo browser supporta HTML5 e supporta questo tag, vedrai il seguente funzionamento (tag espandibile, fai clic per attivare mostra e nascondi, rimosso perché AMP non consente questi tag HTML5 ):

▶ Computing & Technology.

Sfortunatamente, non tutti i browser supportano questo come i browser Microsoft IE o Edge. Ma puoi sempre usare jQuery (o pure javascript) per ottenere gli stessi effetti (almeno il 99% simili).

▶ Informatica e tecnologia.

Il codice sorgente è:

jQuery(document).ready(function() {
  jQuery('#example_label1').click(function() {
     jQuery('#example_d1').toggle();
  });
});

Sono definiti due div HTML: esempio_etichetta1 e esempio_d1. Il triangolo unicode quadrato a destra viene trasformato in basso ma questo non viene preso in considerazione in questo semplice sostituto di jQuery .

Sembra che tu stia utilizzando un blocco degli annunci. Ma senza entrate pubblicitarie, non possiamo continuare a rendere questo sito fantastico. Capisco, ho disabilitato il mio blocco degli annunci.

Fonte di registrazione: helloacm.com