Wie konvertiert man mit jQuery eine ungeordnete Liste in ein gestaltetes Dropdown-Menü?

Stilisierte Dropdown-Menüs aus ungeordneten Listen mit jQuery erstellen

Konvertieren einer ungeordneten Liste in ein elegantes und funktionales Dropdown kann das Benutzererlebnis auf einer Website erheblich verbessern. jQuery bietet eine elegante Lösung für diese Aufgabe, mit der Sie Ihre Listen ganz einfach in interaktive Dropdown-Menüs umwandeln können.

Problem:

Wie konvertiert man eine ungeordnete Liste in die untenstehendes Format:

<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

in ein Dropdown-Menü im folgenden Format:

<select>
    <option value="one.html" target="_blank">one</option>
    <option value="two.html" target="_blank">two</option>
    <option value="three.html" target="_blank">three</option>
    <option value="four.html" target="_blank">four</option>
    <option value="five.html" target="_blank">five</option>
    <option value="six.html" target="_blank">six</option>
    <option value="seven.html" target="_blank">seven</option>
</select>

Lösung:

jQuery kann Sie bei dieser Konvertierung unterstützen Prozess:

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

Dieses Code-Snippet durchläuft Ihre ungeordnete Liste mit jQuery und erstellt ein

Element hinzufügen und an jedes Listenelement anhängen. Die Werte und Texte innerhalb der Elemente werden jeweils aus den href- und innerHTML-Attributen der Anker-Tags abgerufen.

Verbesserungen:

Um Ihrem Dropdown Stil hinzuzufügen, können Sie jQuery-Plugins wie verwenden [jqTransform](http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/), um ein individuelles und optisch ansprechendes Dropdown-Erlebnis zu bieten.

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