Comment transformer une liste non ordonnée en liste déroulante avec jQuery ?

Transformer une liste non ordonnée en liste déroulante avec jQuery : améliorer l'expérience utilisateur

Une liste non ordonnée (UL) peut être convertie en liste déroulante (SELECT) élément utilisant jQuery pour améliorer l’interface utilisateur et l’expérience de navigation. Voici comment réaliser cette conversion :

$(function() {
    $('ul.selectdropdown').each(function() {
        var $select = $('<select>');

        $(this).find('a').each(function() {
            var $option = $('<option>');
            $option.attr('value', $(this).attr('href')).html($(this).html());
            $select.append($option);
        });

        $(this).replaceWith($select);
    });
});

Dans ce code, la fonction each() parcourt toutes les listes non ordonnées avec la classe "selectdropdown" et crée un élément SELECT pour chaque liste. Pour chaque élément de liste (LI), un élément OPTION est créé et sa valeur et son texte sont définis en fonction des informations de la balise d'ancrage (A) du LI. L'élément SELECT est ensuite inséré à la place de la liste non ordonnée d'origine.

De plus, pour ouvrir automatiquement le lien sélectionné dans une nouvelle fenêtre ou un nouvel onglet lorsque vous cliquez dessus, vous pouvez ajouter l'attribut suivant à l'élément SELECT dans la boucle :

$('select').attr('onchange', 'window.open(this.value)');

De plus, pour le style, vous pouvez vous référer à des bibliothèques telles que jqTransform pour personnaliser l'apparence de la liste déroulante. En appliquant ce code et en le personnalisant selon vos besoins, vous pouvez facilement convertir des listes non ordonnées en menus déroulants visuellement attrayants et conviviaux, améliorant ainsi l'expérience de navigation de votre application Web.

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!