Wie konvertiere ich ungeordnete Listen mit jQuery in stilvolle Auswahl-Dropdowns?

Ungeordnete Listen in stilvolle Auswahl-Dropdowns mit jQuery konvertieren

Stellen Sie sich vor, Sie hätten eine ungeordnete Liste voller Links und möchten sie in ein elegantes Auswahl-Dropdown umwandeln. Mit der Leistungsfähigkeit von jQuery ist das eine einfache Aufgabe.

Konvertieren der ungeordneten Liste

Der folgende Codeausschnitt wandelt eine ungeordnete Liste mit Ankertags, die auf externe Seiten verweisen, in ein Auswahl-Dropdown um:

$(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);
    });
});

Dieser Code durchläuft jede ungeordnete Liste mit der Klasse „selectdropdown“, erstellt ein Auswahlelement für jede Liste, Fügt für jeden Link in der Liste eine Option hinzu und ersetzt die ursprüngliche Liste durch das Auswahlelement.

Stil und Funktionalität

Um das Auswahl-Dropdown zu gestalten, können Sie auf externe Stilbibliotheken wie jQuery verweisen Verwandeln. Darüber hinaus können Sie den Code ändern, um den ausgewählten Link automatisch in einem neuen Fenster oder Tab zu öffnen:

$(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);

-       $select.on('change', function() { window.open($(this).val(), '_blank'); });
+       $select.on('change', function() { window.open($(this).find('option:selected').val(), '_blank'); });
    });
});

Diese Änderung fügt dem ausgewählten Element einen Ereignis-Listener hinzu, der den ausgewählten Link in einem neuen Fenster oder Tab öffnet wenn der Benutzer den Wert des Auswahlelements ändert.

Mit diesen Verbesserungen können Sie mit jQuery ganz einfach stilvolle und funktionale Auswahl-Dropdowns aus ungeordneten Listen erstellen.

Das obige ist der detaillierte Inhalt vonWie konvertiere ich ungeordnete Listen mit jQuery in stilvolle Auswahl-Dropdowns?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!