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

jQuery を使用して順序なしリストをドロップダウンに変換する: ユーザー エクスペリエンスを向上させる

順序なしリスト (UL) をドロップダウン (SELECT) に変換できます。 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);
    });
});

このコードでは、each() 関数はクラス「selectdropdown」を持つすべての順序なしリストを反復処理し、リストごとに SELECT 要素を作成します。リスト項目 (LI) ごとに OPTION 要素が作成され、その値とテキストが LI のアンカー タグ (A) 情報に基づいて設定されます。その後、元の順序なしリストの代わりに SELECT 要素が挿入されます。

さらに、選択したリンクをクリックしたときに新しいウィンドウまたはタブで自動的に開くには、ループ内の SELECT 要素に次の属性を追加できます。 :

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

さらに、スタイル設定については、jqTransform などのライブラリを参照して、ドロップダウンの外観をカスタマイズできます。このコードを適用し、必要に応じてカスタマイズすると、順序なしリストを視覚的に魅力的で使いやすいドロップダウン メニューに簡単に変換でき、Web アプリケーションのナビゲーション エクスペリエンスが向上します。

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