jQueryを使用して順序なしリストをスタイリッシュな選択ドロップダウンに変換する方法?-CSSチュートリアル-php.cn

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

DDD

リリース： 2024-11-12 16:30:02

オリジナル

479 人が閲覧しました

How to Convert Unordered Lists to Stylish Select Dropdowns using 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 サイトの他の関連記事を参照してください。