Comment créer des listes ordonnées imbriquées en HTML avec une numérotation cohérente ?

Listes ordonnées imbriquées en HTML avec numérotation

Lors de la création de listes ordonnées imbriquées en HTML, vous pouvez rencontrer le problème où la liste interne commence à être numérotée de 1 à nouveau. Cela peut perturber le bon déroulement de la liste. Pour résoudre ce problème, les techniques CSS et jQuery suivantes peuvent être utilisées :

Approche CSS

Pour les navigateurs prenant en charge le style CSS, vous pouvez utiliser la propriété counter-reset pour réinitialiser la numérotation pour chaque niveau de la liste. La propriété counter-increment incrémente le compteur pour chaque élément de la liste.

html body ol {
  list-style-type: none;
  counter-reset: level1;
}

ol li:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

Approche jQuery

Pour les navigateurs plus anciens comme IE6/7 qui ne prennent pas en charge le compteur- propriété de réinitialisation, vous pouvez utiliser jQuery pour insérer la numérotation manuellement. Cette méthode consiste à faire précéder chaque élément d'un élément contenant le numéro respectif.

$(document).ready(function() {
  if ($('ol:first').css('list-style-type') != 'none') { /* For IE6/7 only. */
    $('ol ol').each(function(i, ol) {
      ol = $(ol);
      var level1 = ol.closest('li').index() + 1;
      ol.children('li').each(function(i, li) {
        li = $(li);
        var level2 = level1 + '.' + (li.index() + 1);
        li.prepend('<span>' + level2 + '</span>');
      });
    });
  }
});

En mettant en œuvre l'une ou l'autre de ces approches, vous pouvez obtenir des listes ordonnées imbriquées avec une numérotation cohérente, offrant une présentation plus organisée et structurée de votre contenu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!