Jak rozwinąć i zwinąć DIV w JavaScript

Divy umożliwiają grupowanie elementów na stronie sieci Web. Istnieją dwa sposoby, aby zniknąć divy na stronie internetowej. Po pierwsze, kod powoduje, że div staje się niewidzialnym elementem lub można użyć collapse. Jeśli po prostu uczynisz div niewidzialnym, puste miejsce pozostanie tam, gdzie istnieje div. Zwijanie div usuwa to puste miejsce, nie pozostawiając „dziury” na stronie internetowej. Używając JavaScript połączonego z przyciskiem, tworzysz własne div, które zwijają się i rozszerzają, gdy użytkownicy klikają przycisk.

Dodaj Div do strony internetowej

Krok 1
Uruchom Notatnik i otwórz dowolny ze swoich dokumentów HTML.

Krok 2
Dodaj ten blok kodu HTML do sekcji „ciało” dokumentu:

Tekst Div
Ten kod tworzy div i przycisk. Div zawiera akapit z tekstem, który brzmi: „Tekst Div”. Zamień ten tekst na dowolny. Przycisk „wywołuje funkcję JavaScript po kliknięciu. Ta funkcja powoduje, że div przełącza się między stanem zwiniętym a rozwiniętym.
Zlokalizuj właściwości „id” i „class” w znaczniku div. Aby utworzyć rozwijający się i zwijający div, musisz nadać div wartość id. W tym przykładzie ta wartość to „MyDiv”. Div ma także właściwość klasy. W tym przypadku wartość tej właściwości to „divVisible”. To jest nazwa klasy CSS zdefiniowanej w następnej sekcji.

Dodaj klasy CSS i JavaScript

Krok 1
Dodaj następujący kod CSS do sekcji „head” dokumentu: To tworzy klasę „divVisible” i inną klasę o nazwie „divHidden”. Klasa „divVisible” ustawia wartość wyświetlaną na „block”. Wartość „block” powoduje, że dowolny element HTML, który odwołuje się do klasy, jest widoczny i rozszerza go, zajmując miejsce na stronie sieci Web. Klasa „divHidden” ustawia wartość wyświetlaną na „none”. Dowolny element HTML odwołujący się do tej klasy zwija się i nie zostawia za sobą miejsca.

Krok 2
Dodaj ten kod JavaScript poniżej kodu CSS: Zmienna divID przechowuje wartość identyfikatora div, który chcesz zwinąć i rozwinąć. Ta wartość to „MyDiv”. Pozostała część kodu uzyskuje bieżącą nazwę klasy CSS div i przełącza ją przy każdym uruchomieniu kodu. Po pierwszym uruchomieniu kod zmienia nazwę klasy div na „divHidden”. Po drugim uruchomieniu zmienia nazwę klasy z powrotem na „divVisible.”

Krok 3
Zapisz dokument HTML i otwórz go w przeglądarce. Pojawi się akapit zawierający Twój akapit.
Kliknij przycisk „Zwiń /Rozwiń”. Tekst się zawala. Kliknij przycisk ponownie, aby rozwinąć tekst. Zwróć uwagę, jak przycisk i inne elementy pod tekstem przesuwają się w górę, gdy tekst się zwija i przesuwa w dół, gdy tekst się rozszerza.

URL:https://pl.whycomputer.com/Internet/100306624.html