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" 클래스를 사용하여 순서가 지정되지 않은 각 목록을 반복하고, 각 목록에 대한 선택 요소를 생성하고, 목록 내의 각 링크에 대한 옵션을 추가하고, 원래 목록을 선택 요소로 바꿉니다.

스타일링 및 기능

선택 드롭다운의 스타일을 지정하려면 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'); });
    });
});

로그인 후 복사

이 수정은 선택한 링크를 새 창이나 탭에서 여는 선택 요소에 이벤트 리스너를 추가합니다. 사용자가 선택 요소의 값을 변경할 때.

이러한 향상된 기능을 통해 jQuery를 사용하여 정렬되지 않은 목록에서 세련되고 기능적인 선택 드롭다운을 쉽게 만들 수 있습니다.

위 내용은 jQuery를 사용하여 정렬되지 않은 목록을 세련된 선택 드롭다운으로 변환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!