Heim > Web-Frontend > CSS-Tutorial > Wie konvertiere ich ungeordnete Listen mit jQuery in stilvolle Auswahl-Dropdowns?

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

DDD
Freigeben: 2024-11-12 16:30:02
Original
479 Leute haben es durchsucht

How to Convert Unordered Lists to Stylish Select Dropdowns using jQuery?

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);
    });
});
Nach dem Login kopieren

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'); });
    });
});
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage