Ebben az oktatóanyagban megtudhatja, hogyan hozhat létre egyszerű legördülő menüt vanília Javascript, HTML és CSS segítségével. Végig fogjuk járni a HTML, CSS és Javascript kódot, de nagyobb figyelmet fordítunk a programozásra, mivel ez egy JS oktatóanyag. Csak sima JS-t és CSS-t fogunk használni, keretek és előfeldolgozók nélkül. Az egyetlen (fajta) kivétel a Font Awesome CSS fájl importálása lesz, mert az egyik ikonját használjuk.
Ez azoknak a fejlesztőknek szól, akik átlagosan értenek a HTML-hez, a CSS-hez és a JS-hez. Igyekeztem a lehető legtisztábbá tenni, de itt nem fogok túlságosan a részletekre koncentrálni. Remélem mindannyian élvezni fogjátok.
Pillanatképek
Így néz ki a kód eredménye:
Kezdő képernyő:
Megnyitott legördülő menü:
Legördülő menü a kiválasztott opcióval:
HTML:
Ebben a részben a bemutató oldal HTML-kódjának megvalósítását tárgyaljuk. Először nézzük meg a kódot
Dropdown Example Ez alapvetően HTML fej kazán, kivéve azokat a linkcímkéket , amelyek betöltik a két CSS stíluslapot, amelyeket ebben az oktatóanyagban használunk: a Font Awesome stílusokat és a styles.cssfájlt, ahol meghatározzuk az oldal stílusait.
Ezután ott van a HTML fájl többi része, a törzs:
Select an option Option 1 Option 2 Option 3 Option 4 The result is: ... Ez a szakasz 3 fő részre osztható:
- A
.dropdowndiv, ahol a legördülő elem szerkezetét definiálják. - Az az
#resultelem, amely tartalmazza a felhasználó által kiválasztott opciót a legördülő menüből. - A
címkébe írt szkript . A megvalósítása rejtve van, mert részleteit a bemutató utolsó szakaszában ismertetjük.
A legördülő elem diva titleés menuelemeket tartalmaz. Az előbbi csak azt határozza meg, hogy milyen szöveg jelenik meg az elemen, mielőtt bármelyik opciót kiválasztanák, az utóbbi pedig azokat a lehetőségeket, amelyek az elem által választhatók lesznek.
Az resultelem csak azért van, hogy megmutassa, melyik opció van kiválasztva.
Stílusok:
Az alábbiakban ellenőrizheti a teljes css kódot. Mint látható, a CSS3-at transitionés a transformkonstrukciókat használja.
Kérjük, vegye figyelembe az .dropdownosztályok definícióit. Ezeket a legördülő tároló összetevő elrendezésének, valamint annak belső elemeinek, például a .titleés annak elemeinek .optionmeghatározására használják.
body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }JavaScript:
Most meglátjuk, hogyan valósul meg a Javascript rész. Először áttekintjük a függvénydefiníciókat, majd a kódot, amely ezeket a függvényeket meghívja a legördülő műveletek végrehajtása érdekében.
Alapvetően 3 művelet zajlik le, attól függően, hogy mi a felhasználói interakció, mivel hallgatóik hozzáadódnak a DOM elemekhez:
- Kattintson a legördülő elemre
- Az egyik legördülő menü kiválasztása
- Az aktuálisan kiválasztott opció módosítása
Szeretném egyértelművé tenni, hogy a nyílfüggvényeket ( () => {}) és a constkulcsszót használjuk, amelyek az ES6 jellemzői. Valószínűleg jó, ha a böngésző legújabb verzióját használja, de ezt tartsa szem előtt.
1. Kattintson a legördülő elemre
function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }A legördülő elemre kattintva megnyílik (ha zárva van) vagy bezár (ha nyitva van). Ez úgy történik, toggleMenuDisplayhogy a legördülő menüben a kattintási eseményfigyelőhöz kötődik . Ez a függvény váltogatja menuelemének megjelenítését a toggleDisplayés a toggleClassfunkciók használatával.
2. Válassza ki az egyik legördülő menüpontot
function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }3. Az aktuálisan kiválasztott opció módosítása
function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }A függvény az elem handleTitleChangeegyéni changeeseményéhez van kötve .title, hogy megváltoztassa az #resultelem tartalmát, amikor a cím elem megváltozik. Az esemény kiváltása az előző szakaszban történik.
Fő kód
//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);A fő részben csak néhány egyszerű kód található a legördülő menü címének és opcióinak elemeihez, amelyek az utolsó szakaszban tárgyalt eseményekhez kötik őket.
Demó
Az alkalmazás teljes kódja és bemutatója itt található.
More Information
- ES6 introduction
- Arrow functions
- Let and Const