Bagaimana untuk Menukar Senarai Tidak Tertib kepada Dropdown Pilihan Bergaya menggunakan jQuery?

Menukar Senarai Tidak Tersusun kepada Jatuh Turun Pilihan Bergaya dengan jQuery

Bayangkan mempunyai senarai tidak tersusun yang diisi dengan pautan dan anda mahu mengubahnya menjadi lungsur turun pilihan yang anggun. Dengan kuasa jQuery, ia adalah satu tugas yang mudah.

Menukar Senarai Tidak Tersusun

Coretan kod berikut menukar senarai tidak tersusun dengan teg sauh yang memaut ke halaman luaran menjadi lungsur turun terpilih:

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

Kod ini berulang pada setiap senarai tidak tertib dengan kelas "select dropdown," mencipta pilihan elemen untuk setiap senarai, menambah pilihan untuk setiap pautan dalam senarai dan menggantikan senarai asal dengan elemen pilih.

Penggayaan dan Kefungsian

Untuk menggayakan menu lungsur pilih, anda boleh merujuk kepada perpustakaan penggayaan luaran seperti jQuery Transform. Selain itu, anda boleh mengubah suai kod untuk membuka pautan yang dipilih secara automatik dalam tetingkap atau tab baharu:

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

Pengubahsuaian ini menambahkan pendengar acara pada elemen pilih yang membuka pautan yang dipilih dalam tetingkap atau tab baharu apabila pengguna menukar nilai elemen pilih.

Dengan peningkatan ini, anda boleh membuat lungsur turun pilihan yang bergaya dan berfungsi dengan mudah daripada senarai tidak tertib menggunakan jQuery.

Atas ialah kandungan terperinci Bagaimana untuk Menukar Senarai Tidak Tertib kepada Dropdown Pilihan Bergaya menggunakan jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!