Bagaimanakah anda menukar senarai tidak tersusun ke dalam menu lungsur turun gaya menggunakan jQuery?

Mencipta Menu Turun Bergaya daripada Senarai Tidak Tersusun dengan jQuery

Menukar senarai tidak tersusun menjadi lungsur turun boleh meningkatkan pengalaman pengguna pada tapak web. jQuery menyediakan penyelesaian yang elegan untuk tugas ini, membolehkan anda mengubah senarai anda menjadi menu lungsur turun interaktif dengan mudah.

Masalah:

Bagaimana anda menukar senarai tidak tertib dalam di bawah 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>

ke dalam menu lungsur dalam format berikut:

<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>

Penyelesaian:

jQuery boleh membantu anda dengan penukaran ini proses:

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

Coretan kod ini merentasi senarai anda yang tidak tersusun menggunakan jQuery, mencipta

elemen dan melampirkannya pada setiap item senarai. Nilai dan teks dalam elemen diambil daripada atribut href dan innerHTML bagi tag anchor, masing-masing.

Peningkatan:

Untuk menambah penggayaan pada lungsur turun anda, anda boleh menggunakan pemalam jQuery seperti [jqTransform](http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/) untuk menyediakan pengalaman jatuh turun tersuai dan menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah anda menukar senarai tidak tersusun ke dalam menu lungsur turun gaya menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!