Jak utworzyć listę rozwijaną za pomocą JavaScript?

HTML i CSS są używane do tworzenia oszałamiających stron internetowych, ale kiedy JavaScript jest używany w kombinacji, wynik jest absolutnie fenomenalny. Jedną naprawdę fajną rzeczą na stronie internetowej są listy rozwijane. Teraz istnieje wiele ramy dostępnych w Internecie, które pozwalają użytkownikowi korzystać z wstępnie zbudowanych list rozwijanych, ale wiedza o podstawach jest ważna. W tym artykule pokaże, jak utworzyć podstawową listę rozwijaną za pomocą HTML, CSS i JavaScript.

Krok 1: Skonfiguruj dokument HTML

Zacznij od utworzenia dokumentu HTML i umieszczania następujących wierszy w pliku HTML:

Wybierz Make CAR


Porsche
Mercedes
BMW
Audi
Bugatti

Wyjaśnijmy, co się tutaj dzieje:

• Rodzic jest tworzony z id = „ddsection”, Później ten div zostanie wykorzystany do wyrównania elementów dziecka w linii z tym
• Tworzony jest przycisk, który wywołuje ButtonClicked () metoda po kliknięciu. Ten przycisk zostanie użyty do wyświetlania listy rozwijanej.
• Następnie inna Div jest tworzona z identyfikatorem „CARMAKES”, który będzie przechowywać w nim mnóstwo opcji. Ten div będzie działał jak kontener dla znaczniki umieszczone w nim.

Uruchomienie dokumentu HTML podaje następujące dane wyjściowe do przeglądarki:

Ponieważ jest widoczny na wyjściu, elementy rozwijanej listy nie znajdują się we właściwym miejscu. Powinni być:

• Ukryte, aż przycisk zostanie kliknięty
• W pionie w linii przycisku, ponieważ jest to lista „rozwijana”

Naprawmy to w następnym kroku

Krok 2: Naprawienie elementów listy rozwijanej za pomocą CSS

Aby rozpocząć, ustaw właściwość wyświetlacza Dysponent Div Div (której identyfikatorem jest ddsection) „Inline-block”, ustaw swoją pozycję "względny":

#ddsection
Pozycja: względny;
Wyświetlacz: Block Inline;

Następnie dodaj stylistykę do przycisku:

#przycisk
Wyściółka: 10px 30px;
Rozmiar czcionki: 15px;

Stylizować kontener dla elementów listy i ustaw go wyświetlacz własność do "nic" tak, aby był ukryty na początku:

#Carmakes
Nie wyświetla się;
MIN-PIDTH: 185px;

I wreszcie, styguj elementy listy i ustaw ich właściwość wyświetlania "nic", Więc są również ukryte na początku:

#Carmakes a
Blok wyświetlacza;
kolor tła: RGB (181, 196, 196);
Wyściółka: 20px;
czarny kolor;
Dekoracja tekstu: Brak;

Pełny kod CSS dla tej demonstracji:

#ddsection
Pozycja: względny;
Wyświetlacz: Block Inline;

#przycisk
Wyściółka: 10px 30px;
Rozmiar czcionki: 15px;

#Carmakes
Nie wyświetla się;
MIN-PIDTH: 185px;

#Carmakes a
Blok wyświetlacza;
kolor tła: RGB (181, 196, 196);
Wyściółka: 20px;
czarny kolor;
Dekoracja tekstu: Brak;

Uruchomienie HTML teraz utworzy następujące dane wyjściowe w przeglądarce:

Elementy listy są teraz ukryte, wszystko, co pozostało do zrobienia, to przełączać właściwość wyświetlania po przycisku. Zróbmy to w następnym kroku.

Krok 3: Przełączanie właściwości wyświetlacza z JavaScript

W pliku JavaScript zacznij od utworzenia funkcji ButtonClicked (), które zostaną wykonane po naciśnięciu przycisku:

funkcja ButtonClicked ()
// nadchodzące wiersze kodu należą tutaj

W tej funkcji uzyskaj odniesienie do DIV z ID „CARMAKES”, który jest kontenerem dla elementów listy takich jak:

var Container = dokument.GetElementById („Carmes”);

Następnie użyj pojemnik zmienna do wyświetlania i ukrycia rozwijanej listy za pomocą instrukcji IF-Else i właściwości wyświetlania TAKMAKY Div:

if (pojemnik.styl.display === „Brak”)
pojemnik.styl.display = "blok";
w przeciwnym razie
pojemnik.styl.display = "none";

Pełny kod JavaScript dla tej demonstracji jest:

funkcja ButtonClicked ()
var Container = dokument.GetElementById („Carmes”);
if (pojemnik.styl.display === „Brak”)
pojemnik.styl.display = "blok";
w przeciwnym razie
pojemnik.styl.display = "none";

Następnie po prostu uruchom plik HTML w przeglądarce i kliknij przycisk, aby wyświetlić i ukryć rozwijaną listę:

A rozwijana lista działa doskonale dobrze.

Wniosek

Lista rozwijana można utworzyć za pomocą kombinacji HTML, CSS i JavaScript. Listy rozwijane dodają do estetyki strony internetowej. Aby utworzyć listę rozwijaną, utwórz wymagane elementy w pliku HTML. W pliku CSS stygnij elementy i ukryj je za pomocą ich wyświetlacz nieruchomość. W pliku JavaScript przełącz właściwość wyświetlania przy przycisku. W tym artykule utworzenie rozwijanej listy zostało wyjaśnione krok po kroku.