jQueryを使用して順序なしリストをスタイリッシュな選択ドロップダウンに変換する方法?

jQuery を使用して順序なしリストをスタイリッシュな選択ドロップダウンに変換する

リンクでいっぱいの順序なしリストを、洗練された選択ドロップダウンに変換したいと想像してください。 jQuery の機能を利用すると、これは簡単な作業です。

順序なしリストの変換

次のコード スニペットは、外部ページにリンクするアンカー タグを含む順序なしリストを選択ドロップダウンに変換します。

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

このコードは、クラス「selectdropdown」を持つ順序なしリストを反復処理し、リストごとに select 要素を作成し、リスト内の各リンクにオプションを追加して、元のリストを select 要素で置き換えます。

スタイルと機能

選択ドロップダウンをスタイルするには、jQuery Transform などの外部スタイル ライブラリを参照できます。さらに、選択したリンクを新しいウィンドウまたはタブで自動的に開くようにコードを変更できます。

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

この変更により、選択したリンクを新しいウィンドウまたはタブで開くイベント リスナーが select 要素に追加されます。ユーザーが選択要素の値を変更したとき。

これらの機能強化により、jQuery を使用して順序なしリストからスタイリッシュで機能的な選択ドロップダウンを簡単に作成できます。

以上がjQueryを使用して順序なしリストをスタイリッシュな選択ドロップダウンに変換する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。