So schreiben Sie eine JQuery-Dateibaumstruktur-Front-End-Fragen und Antworten-php.cn

So schreiben Sie eine JQuery-Dateibaumstruktur

PHPz

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

Original

602 Leute haben es durchsucht

Bei der Entwicklung von Webanwendungen müssen wir häufig einige visuelle Organisationsstrukturen in der Anwendung anzeigen, und die Dateistruktur ist eine davon. Die jQuery-Dateibaumstruktur ist eine sehr effiziente Möglichkeit, die hierarchische Struktur von Dateien und Ordnern anzuzeigen.

Als nächstes stellen wir Ihnen vor, wie Sie mit jQuery eine Dateibaumstruktur erstellen.

JQuery-Bibliothek importieren

Zuerst müssen Sie die jQuery-Bibliotheksdatei importieren. Fügen Sie den folgenden Code im Head-Tag der Seite hinzu:

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

Nach dem Login kopieren

HTML-Schema erstellen

Als nächstes müssen wir ein HTML-Schema erstellen, um die Dateibaumstruktur anzuzeigen. Wir erstellen einen einfachen Div-Container, um die Dateibaumhierarchie anzuzeigen.

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

Nach dem Login kopieren

JavaScript-Code schreiben

Als nächstes schreiben wir jQuery-Code, um die HTML-Struktur in eine Dateibaumstruktur umzuwandeln. Wir werden die Methode „each()“ von jQuery verwenden, um die HTML-Struktur zu durchlaufen und sie in eine Dateibaumstruktur umzuwandeln.

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

Nach dem Login kopieren

In diesem Code durchlaufen wir jedes „li“-Element und prüfen, ob es in seinen untergeordneten Elementen ein „ul“-Element gibt. Wenn ja, markieren wir ihn als übergeordneten Ordner. Anschließend blenden wir alle Unterverzeichnisse des Ordners aus (durch Aufruf der Methode „hide()“) und hängen einen Click-Event-Handler an, um sie anzuzeigen (durch Aufruf der Methode „show()“).

Stildesign

Abschließend benötigen wir einige CSS-Stile, damit die Dateibaumstruktur übersichtlicher und schöner aussieht.

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

Nach dem Login kopieren

Dieser CSS-Code verwandelt die Dateibaumstruktur in ein besser lesbares visuelles Design. Es setzt die Ränder und den Abstand aller ungeordneten Listen und Listenelemente auf Null und alle Elemente in den Listenelementen auf nicht markiert. Darüber hinaus wird das „+“-Symbol als CSS-Pseudoelement zur Darstellung des übergeordneten Ordners verwendet, während ein durchgezogener Rahmen zur Darstellung der untergeordneten Ordner verwendet wird.

Zusammenfassung

Durch die Verwendung von jQuery zum Erstellen einer Dateibaumstruktur können Sie komplexe Hierarchien einfach anzeigen und deren Erscheinungsbild und Verhalten mithilfe von CSS-Stilen anpassen. Mit zunehmenden Kenntnissen in JavaScript und jQuery können Sie auch komplexere Dateibaumstrukturen erstellen, die Ihren spezifischen Anforderungen entsprechen.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine JQuery-Dateibaumstruktur. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!