Jquery 파일 트리 구조를 작성하는 방법-프런트엔드 Q&A-php.cn

Jquery 파일 트리 구조를 작성하는 방법

PHPz

풀어 주다： 2023-05-28 11:34:07

원래의

657명이 탐색했습니다.

웹 애플리케이션이 개발되면서 애플리케이션에 시각적인 조직 구조를 표시해야 하는 경우가 많으며 파일 구조도 그중 하나입니다. jQuery 파일 트리 구조는 파일과 폴더의 계층 구조를 표시하는 매우 효율적인 방법입니다.

다음에는 jQuery를 사용하여 파일 트리 구조를 만드는 방법을 소개하겠습니다.

jQuery 라이브러리 가져오기

먼저 jQuery 라이브러리 파일을 가져와야 합니다. 페이지의 head 태그에 다음 코드를 추가합니다.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

로그인 후 복사

HTML 스키마 생성

다음으로 파일 트리 구조를 표시하기 위한 HTML 스키마를 생성해야 합니다. 파일 트리 계층 구조를 표시하기 위해 간단한 div 컨테이너를 만듭니다.

<div class="file-tree">
    <ul>
        <li><a href="#">Folder 1</a>
            <ul>
                <li><a href="#">Subfolder 1</a></li>
                <li><a href="#">Subfolder 2</a></li>
            </ul>
        </li>
        <li><a href="#">Folder 2</a></li>
        <li><a href="#">Folder 3</a>
            <ul>
                <li><a href="#">Subfolder 1</a></li>
            </ul>
        </li>
    </ul>
</div>

로그인 후 복사

JavaScript 코드 작성

다음으로 HTML 구조를 파일 트리 구조로 변환하는 jQuery 코드를 작성하겠습니다. HTML 구조를 파일 트리 구조로 변환하기 위해 jQuery의 "each()" 메서드를 사용하여 HTML 구조를 반복합니다.

$(document).ready(function () {
    $(".file-tree ul").hide();
    $(".file-tree li").each(function () {
        if ($(this).children("ul").length > 0) {
            $(this).addClass("parent");
        }
    });
    $(".file-tree a").click(function () {
        var children = $(this).parent("li.parent").children("ul");
        if (children.is(":visible")) {
            children.hide();
        } else {
            children.show();
        }
    });
});

로그인 후 복사

이 코드에서는 각 "li" 요소를 반복하고 해당 하위 요소에 "ul" 요소가 있는지 확인합니다. 그렇다면 이를 상위 폴더로 표시합니다. 그런 다음 모든 폴더의 하위 디렉터리를 숨기고("hide()" 메서드 호출) 클릭 이벤트 핸들러를 연결하여 이를 표시합니다("show()" 메서드 호출).

스타일 디자인

마지막으로 파일 트리 구조를 더 깔끔하고 멋지게 보이게 하려면 몇 가지 CSS 스타일이 필요합니다.

.file-tree ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.file-tree ul {
    margin-left: 1em;
    position: relative;
}
.file-tree li.parent > a:before {
    content: "+ ";
}
.file-tree ul ul:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0.5em;
    border-left: 1px solid #ccc;
}

로그인 후 복사

이 CSS 코드는 파일 트리 구조를 더 읽기 쉬운 시각적 디자인으로 변환합니다. 순서가 지정되지 않은 모든 목록과 목록 항목의 여백과 안쪽 여백을 0으로 설정하고 목록 항목의 모든 항목을 표시 해제로 설정합니다. 또한 "+" 기호를 CSS 의사 요소로 사용하여 상위 폴더를 나타내고, 단색 테두리를 사용하여 하위 폴더를 나타냅니다.

요약

jQuery를 사용하여 파일 트리 구조를 생성하면 복잡한 계층 구조를 쉽게 표시하고 CSS 스타일을 사용하여 모양과 동작을 사용자 정의할 수 있습니다. JavaScript 및 jQuery에 대한 숙련도가 높아짐에 따라 특정 요구 사항에 맞게 보다 복잡한 파일 트리 구조를 만들 수도 있습니다.

위 내용은 Jquery 파일 트리 구조를 작성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!