Kuinka luoda avattava valikko CSS: llä ja JavaScriptillä

Tässä opetusohjelmassa opit luomaan yksinkertaisen avattavan valikon vanilja Javascriptilla, HTML: llä ja CSS: llä. Käymme läpi HTML-, CSS- ja Javascript-koodin, mutta kiinnitämme enemmän huomiota ohjelmointiin, koska tämä on JS-opetusohjelma. Käytämme yksinkertaista JS: ää ja CSS: ää ilman kehyksiä tai esiprosessoreita. Ainoa (eräänlainen) poikkeus on Font Awesome CSS -tiedoston tuominen, koska käytämme yhtä sen kuvakkeista.

Tämä on suunnattu kehittäjille, jotka ymmärtävät keskimäärin HTML: n, CSS: n ja JS: n. Yritin tehdä siitä mahdollisimman puhtaan, mutta en keskity liikaa yksityiskohtiin täällä. Toivottavasti nautitte kaikista.

Kuvakaappaukset

Näin kooditulos näyttää:

Aloitusnäyttö:

Avattava valikko avattu:

Avattava valikko:

HTML:

Tässä osiossa käsitellään demosivun HTML-koodin käyttöönottoa. Aloitetaan katsotaan koodi

      Dropdown Example

Tämä on pohjimmiltaan HTML-pääkattilakivi, lukuun ottamatta linktunnisteita, jotka lataavat kaksi tässä opetusohjelmassa käytettävää CSS-tyylitaulukkoa: Font Awesome -tyylit ja styles.csstiedosto, jossa määritämme tämän sivun tyylit.

Sitten on jäljellä oleva HTML-tiedosto, runko:

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...

Tämä osa voidaan jakaa kolmeen pääosaan:

  • .dropdownDiv, jossa avattavan elementin rakenne määritellään.
  • #resultElementti, joka sisältää valitun vaihtoehdon mukaan käyttäjä, avattavasta elementti.
  • Tunnisteeseen kirjoitettu komentosarja . Sen toteutus on piilotettu tähän, koska sen yksityiskohdat selitetään tämän opetusohjelman viimeisessä osassa.

Avattavasta elementistä divkoostuu a titleja menuelementit. Ensin mainittu vain määrittää, mikä teksti näytetään elementissä ennen minkä tahansa vaihtoehdon valintaa, ja jälkimmäinen määrittää vaihtoehdot, jotka elementti voi valita.

resultElementti on siellä vain näyttää mitä vaihtoehto on valittuna.

Tyylit:

Alla voit tarkistaa koko css-koodin. Kuten näette, se käyttää CSS3: ta transitionja transformrakenteita.

Kiinnitä huomiota .dropdownluokkien määritelmiin. Niitä käytetään määrittämään asettelun avattavan säiliön komponentti sekä sen sisä- osia, kuten .titleja sen .optionn.

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:

Nyt näemme, kuinka Javascript-osa toteutetaan. Käymme ensin läpi funktion määritelmät ja sitten koodin, joka kutsuu nämä toiminnot tekemään pudotusvalinnat.

Periaatteessa on 3 toimintoa, jotka tapahtuvat käyttäjän vuorovaikutuksen mukaan, koska heidän kuuntelijansa lisätään DOM-elementteihin:

  1. Napsauttamalla avattavaa elementtiä
  2. Valitse yksi avattavista vaihtoehdoista
  3. Valitun vaihtoehdon muuttaminen

Haluaisin tehdä selväksi, että käytämme nuolitoimintoja ( () => {}) ja constavainsanaa, jotka ovat ES6-ominaisuuksia. Olet todennäköisesti hyvä, jos käytät selaimesi uusinta versiota, mutta pidä tämä mielessä.

1. Napsauttamalla pudotusvalikkoa

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'); }

Kun avattavaa elementtiä napsautetaan, se avautuu (jos se on suljettu) tai sulkeutuu (jos se avataan). Tämä tapahtuu sitomalla toggleMenuDisplayavattavan elementin napsautustapahtumien kuuntelija. Tämä toiminto vaihtaa menuelementin näyttöä toggleDisplayja toggleClass-toimintojen avulla.

2. Valitse yksi avattavista vaihtoehdoista

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. Valitun vaihtoehdon muuttaminen

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

Funktio handleTitleChangeon sidottu elementin mukautettuun changetapahtumaan .title, jotta #resultelementin sisältö voidaan muuttaa aina, kun otsikkoelementti muuttuu. Tämä tapahtuma käynnistetään edellisessä osassa.

Pääkoodi

//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);

Pääosassa on vain yksinkertainen koodi, jolla avattavan valikon otsikko ja vaihtoehtoelementit voidaan sitoa niihin viimeisessä osiossa käsiteltyjen tapahtumien kanssa.

Demo

Tämän sovelluksen koko koodi ja esittely löytyy täältä.

Lisää tietoa

  • ES6-esittely
  • Nuolitoiminnot
  • Let ja Const