Jak rozbalit a sbalit DIV v JavaScript

Divs umožňují seskupovat prvky na webové stránce. Existují dva způsoby, jak způsobit divs na webové stránce zmizí. Za prvé, kód dělá div na neviditelný prvek, nebo můžete použít kolaps. Pokud jednoduše vytvoříte neviditelný div, zůstane prázdné místo, kde div existuje. Sbalení div odstraní, že prázdné místo nezanechává ve vaší webové stránce "díru". Pomocí JavaScriptu propojeného s tlačítkem vytvoříte vlastní divs, který se zhroutí a rozbalí, když uživatelé kliknou na tlačítko.

Přidání Div na webovou stránku

Krok 1
Spuštění programu Poznámkový blok a otevřete některý z vašich dokumentů HTML.

Krok 2
Přidejte tento blok kódu HTML do sekce "tělo" dokumentu:

Text Div

Tento kód vytvoří tlačítko div a tlačítko. Div obsahuje odstavec s textem, který zní: "Div text." Nahraďte tento text čímkoliv, co chcete. Tlačítko "tlačítko" zavolá funkci JavaScript při kliknutí. Tato funkce způsobí, že div přepne mezi sbaleným stavem a rozšířeným stavem.
Vyhledejte vlastnosti "id" a "class" v tagu div. Chcete-li vytvořit rozšiřující se a sbalující div, musíte dát div hodnotu id. V tomto příkladu je tato hodnota "MyDiv." Div má také vlastnost třídy. V tomto případě je hodnota vlastnosti "divVisible". Toto je název třídy CSS definované v následující části.

Přidání tříd CSS a JavaScript

Krok 1
Přidejte následující kód CSS do sekce "head" dokumentu: vytvoří třídu "divVisible" a jinou třídu s názvem "divHidden". Třída "divVisible" nastaví hodnotu zobrazení na "block". Hodnota "block" dělá z každého elementu HTML, který odkazuje na třídu, viditelný a rozšiřuje jej tak, aby zabíral místo na webové stránce. Třída "divHidden" nastaví hodnotu zobrazení na hodnotu "none". Jakýkoliv prvek HTML odkazující na tuto třídu se zhroutí a nezanechá za sebou žádný prostor.

Krok 2
Přidejte tento kód JavaScript pod kód CSS: Proměnná divID obsahuje id hodnotu div, který chcete sbalit a rozbalit. Tato hodnota je "MyDiv." Zbytek kódu získá aktuální název třídy CSS divize a přepne jej při každém spuštění kódu. Při prvním spuštění kódu změní název třídy div na "divHidden". Při druhém spuštění změní název třídy zpět na "divVisible".

Krok 3
Uložte dokument HTML a otevřete jej ve svém prohlížeči. Zobrazí se odstavec obsahující odstavec.
Klepněte na tlačítko "Sbalit /rozbalit". Text se zhroutí. Opětovným klepnutím na tlačítko rozbalte text. Všimněte si, jak se tlačítko a další prvky pod textem posouvají nahoru, když se text rozbalí a posunuje se dolů, když se text rozbalí
URL:https://cs.whycomputer.com/Internet/100106624.html