jQuery를 사용하여 정렬되지 않은 목록을 스타일이 지정된 드롭다운 메뉴로 어떻게 변환합니까?

jQuery를 사용하여 정렬되지 않은 목록에서 스타일이 지정된 드롭다운 메뉴 만들기

정렬되지 않은 목록을 세련되고 기능적인 드롭다운은 웹사이트의 사용자 경험을 크게 향상시킬 수 있습니다. jQuery는 목록을 대화형 드롭다운 메뉴로 쉽게 변환할 수 있는 이 작업에 대한 우아한 솔루션을 제공합니다.

문제:

아래 형식:

<ul class="selectdropdown">
    <li><a href="one.html" target="_blank">one</a></li>
    <li><a href="two.html" target="_blank">two</a></li>
    <li><a href="three.html" target="_blank">three</a></li>
    <li><a href="four.html" target="_blank">four</a></li>
    <li><a href="five.html" target="_blank">five</a></li>
    <li><a href="six.html" target="_blank">six</a></li>
    <li><a href="seven.html" target="_blank">seven</a></li>
</ul>

로그인 후 복사

다음 형식의 드롭다운에 추가:

<select>
    <option value="one.html" target="_blank">one</option>
    <option value="two.html" target="_blank">two</option>
    <option value="three.html" target="_blank">three</option>
    <option value="four.html" target="_blank">four</option>
    <option value="five.html" target="_blank">five</option>
    <option value="six.html" target="_blank">six</option>
    <option value="seven.html" target="_blank">seven</option>
</select>

로그인 후 복사

해결책:

jQuery에서 이 변환을 도와줄 수 있습니다. process:

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

로그인 후 복사

이 코드 조각은 jQuery를 사용하여 순서가 지정되지 않은 목록을 탐색하여

요소를 추가하고 이를 각 목록 항목에 추가합니다. 내의 값과 텍스트 요소는 각각 앵커 태그의 href 및 innerHTML 속성에서 검색됩니다.

향상:

드롭다운에 스타일을 추가하려면 다음과 같은 jQuery 플러그인을 사용할 수 있습니다. [jqTransform](http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/)을 통해 시각적으로 매력적인 맞춤형 드롭다운 환경을 제공합니다.

위 내용은 jQuery를 사용하여 정렬되지 않은 목록을 스타일이 지정된 드롭다운 메뉴로 어떻게 변환합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!