Bagaimana untuk menulis struktur pokok fail jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menulis struktur pokok fail jquery

PHPz

Lepaskan： 2023-05-28 11:34:07

asal

631 orang telah melayarinya

Dengan pembangunan aplikasi web, kami selalunya perlu memaparkan beberapa struktur organisasi visual dalam aplikasi, dan struktur fail adalah salah satu daripadanya. Struktur pepohon fail jQuery ialah cara yang sangat cekap untuk memaparkan struktur hierarki fail dan folder.

Seterusnya, kami akan memperkenalkan anda cara menggunakan jQuery untuk mencipta struktur pepohon fail.

Import perpustakaan jQuery

Mula-mula, anda perlu mengimport fail perpustakaan jQuery. Tambahkan kod berikut dalam teg kepala halaman:

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

Salin selepas log masuk

Buat Skema HTML

Seterusnya, kita perlu mencipta skema HTML untuk memaparkan struktur pepohon fail. Kami akan mencipta bekas div mudah untuk memaparkan hierarki pepohon fail.

<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>

Salin selepas log masuk

Tulis kod JavaScript

Seterusnya, kami akan menulis kod jQuery untuk menukar struktur HTML kepada struktur pepohon fail. Kami akan menggunakan kaedah "setiap()" jQuery untuk mengulangi struktur HTML untuk menukarnya kepada struktur pokok fail.

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

Salin selepas log masuk

Dalam kod ini, kami melingkari setiap elemen "li" dan menyemak sama ada terdapat elemen "ul" di kalangan anak-anaknya. Jika ya, kami menandakannya sebagai folder induk. Kami kemudian menyembunyikan semua subdirektori folder (dengan memanggil kaedah "hide()") dan melampirkan pengendali acara klik untuk menunjukkannya (dengan memanggil kaedah "show()").

Reka bentuk gaya

Akhir sekali, kami memerlukan beberapa gaya CSS untuk menjadikan struktur pokok fail kelihatan lebih kemas dan cantik.

.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;
}

Salin selepas log masuk

Kod CSS ini mengubah struktur pepohon fail kepada reka bentuk visual yang lebih mudah dibaca. Ia menetapkan margin dan padding semua senarai tidak tersusun dan item senarai kepada sifar, dan menetapkan semua item dalam item senarai kepada tidak bertanda. Selain itu, ia menggunakan simbol "+" sebagai elemen pseudo CSS untuk mewakili folder induk, sambil menggunakan sempadan pepejal untuk mewakili folder anak.

Ringkasan

Dengan menggunakan jQuery untuk mencipta struktur pepohon fail, anda boleh memaparkan hierarki kompleks dengan mudah dan menyesuaikan penampilan dan tingkah lakunya dengan menggunakan gaya CSS. Apabila kecekapan anda dengan JavaScript dan jQuery meningkat, anda juga boleh mencipta struktur pepohon fail yang lebih kompleks untuk memenuhi keperluan khusus anda.

Atas ialah kandungan terperinci Bagaimana untuk menulis struktur pokok fail jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!