Bagaimana untuk Mengubah Senarai Tidak Tertib menjadi Dropdown dengan jQuery?

Ubah Senarai Tidak Tertib kepada Jatuh Turun dengan jQuery: Tingkatkan Pengalaman Pengguna

Senarai tidak tersusun (UL) boleh ditukar menjadi lungsur turun (PILIH) elemen menggunakan jQuery untuk meningkatkan antara muka pengguna dan pengalaman navigasi. Begini cara anda boleh mencapai penukaran ini:

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

Dalam kod ini, fungsi each() berulang melalui semua senarai tidak tertib dengan kelas "select dropdown" dan mencipta elemen SELECT untuk setiap senarai. Untuk setiap item senarai (LI), elemen OPTION dicipta dan nilai serta teksnya ditetapkan berdasarkan maklumat tag sauh (A) LI. Elemen SELECT kemudiannya dimasukkan sebagai ganti senarai asal tidak tertib.

Selain itu, untuk membuka pautan yang dipilih secara automatik dalam tetingkap atau tab baharu apabila diklik, anda boleh menambah atribut berikut pada elemen SELECT dalam gelung :

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

Tambahan pula, untuk penggayaan, anda boleh merujuk perpustakaan seperti jqTransform untuk menyesuaikan rupa dropdown. Dengan menggunakan kod ini dan menyesuaikannya mengikut keperluan, anda boleh menukar senarai tidak tersusun dengan mudah kepada menu lungsur turun yang menarik secara visual dan mesra pengguna, sekali gus meningkatkan pengalaman navigasi aplikasi web anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Senarai Tidak Tertib menjadi Dropdown dengan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!