Wie verwandle ich eine ungeordnete Liste mit jQuery in ein Dropdown-Menü?

Ungeordnete Liste in Dropdown mit jQuery umwandeln: Benutzererfahrung verbessern

Eine ungeordnete Liste (UL) kann in ein Dropdown (SELECT) umgewandelt werden. Element mit jQuery zur Verbesserung der Benutzeroberfläche und des Navigationserlebnisses. So können Sie diese Konvertierung erreichen:

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

In diesem Code iteriert die Funktion every() alle ungeordneten Listen mit der Klasse „selectdropdown“ und erstellt für jede Liste ein SELECT-Element. Für jedes Listenelement (LI) wird ein OPTION-Element erstellt und sein Wert und Text werden basierend auf den Anker-Tag-Informationen (A) des LI festgelegt. Das SELECT-Element wird dann anstelle der ursprünglichen ungeordneten Liste eingefügt.

Um den ausgewählten Link beim Klicken automatisch in einem neuen Fenster oder Tab zu öffnen, können Sie außerdem das folgende Attribut zum SELECT-Element innerhalb der Schleife hinzufügen :

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

Darüber hinaus können Sie für die Gestaltung auf Bibliotheken wie jqTransform zurückgreifen, um das Erscheinungsbild des Dropdowns anzupassen. Indem Sie diesen Code anwenden und ihn nach Bedarf anpassen, können Sie ungeordnete Listen bequem in optisch ansprechende und benutzerfreundliche Dropdown-Menüs umwandeln und so das Navigationserlebnis Ihrer Webanwendung verbessern.

Das obige ist der detaillierte Inhalt vonWie verwandle ich eine ungeordnete Liste mit jQuery in ein Dropdown-Menü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!