Avaa div napsauttamalla. Divin avaaminen ja piilottaminen sujuvasti jQueryn avulla

Useimmat teistä tämän artikkelin otsikon luettuaan sanovat, että napsautustapahtuman käsitteleminen CSS:llä on mahdotonta. Tämä ei kuitenkaan ole aivan totta. Ja tässä artikkelissa näytän, kuinka voit käsitellä napsautustapahtumaa käyttämällä vain CSS:ää.

Oletetaan, että meillä on tietty välilehti, jonka napsauttaminen avaa tämän välilehden sisällön. Suurin osa tekee tämän kaiken JavaScriptissä, mutta itse asiassa tässä tapauksessa klikkaustapahtuma voidaan käsitellä helposti CSS:n kautta.

Ensinnäkin yleisin HTML-koodi:

Sisältö 1
Välilehti 1


Sisältö 2
Välilehti 2

Ei mitään epätavallista, paitsi että välilehden nimi sijaitsee sisällön alapuolella, ymmärrät myöhemmin miksi. Ja nyt CSS-koodi:

Välilehdet (
kellua: vasen; /* Sijoita kaikki välilehdet yhdelle riville */
marginaali: 10px; /* Sisennä sarkaimet toisistaan ​​*/
}
.sisältö(
näyttö: ei mitään; /* Piilota sisältö */
täyte-top: 20px; /* Joten välilehden otsikko on sisällön alapuolella */
sijainti: absoluuttinen; /* Estääksesi sisältöä siirtämästä elementtejä sivulla */
}
.tabs:active .content (
näyttö: lohko; /* Kun napsautamme välilehteä, avaamme sisältösisällön */
}
.content:hover (
näyttö: lohko; /* Kun osoitin on sisällön päällä, älä sulje sitä */
}

Algoritmi on seuraava: kun napsautat välilehden nimeä, aktiivinen pseudoelementti laukeaa automaattisesti, mutta koska se toimii vain kun näppäintä painetaan, heti kun vapautamme sen, sisältö sulkeutuu. Tämän estämiseksi lisäämme ehdon, että jos osoitin viedään sisällön päälle (hover pseudo-elementti), sitä ei suljeta. Ja jotta osoittimemme päätyisi automaattisesti sisältöön napsauttamalla välilehteä, asetimme painikkeen sisällön alle ja lisäsimme kentän päälle. Siten napsauttamalla välilehden nimeä klikkaamme myös sisältöä, joten klikkauksen jälkeen voimme turvallisesti vapauttaa hiiren painikkeen ja jatkamme sisällön "pidossa" pitäen osoitinta.

Spoileri on tietolohko, joka on alun perin piilotettu käyttäjiltä ja joka näkyy vain, kun käyttäjä napsauttaa tiettyä painiketta. Sivuillani on spoilerin muodossa SÄÄNNÖT kommenttien lisäämiselle. Jos napsautat korostettua sanaa SÄÄNNÖT, alapuolelle avautuu lohko, jossa on säännöt.

Kuten edellä kirjoitin, näytän useita menetelmiä, jotka ovat olennaisesti samanlaisia, mutta käyttävät erilaisia ​​skriptejä ja suorittavat erilaisia ​​animaatioita. Alla on esimerkkejä.

Katsotaanpa kutakin menetelmää järjestyksessä, jotta voit käyttää yhtä niistä verkkosivustollasi. Mutta ennen kuin teemme sen, määritellään jquery-kirjasto. Jos olet yhdistänyt sen aiemmin, aloita menetelmien katsominen, jos et, liitä se sitten ylä- tai alatunnisteeseen.

Nyt mennään järjestyksessä.

Menetelmä nro 1

Itse asiassa yksinkertaisin menetelmä, kun sitä napsautetaan, lohko ilmestyy välittömästi. Kun sitä painetaan uudelleen, se katoaa välittömästi. Se on yksinkertaista. Käytän myös tätä menetelmää.

Lisää hyvin yksinkertainen käsikirjoitus. Voit lisätä sen suoraan paikkaan, jossa haluat näyttää lohkon, voit liittää sen ylä- tai alatunnisteeseen tai voit laittaa sen tiedostoon, jonka voit sitten yhdistää sivustoon, uudelleen missä tahansa.

$(document).ready(function())( $(.spoiler-body").hide(); $(.spoiler-title").click(function())( $(this).next( ) vaihtaa()));

Skripti toimii lohkon kanssa, jolle on määritetty spoiler-body-luokka, ja se näyttää sen, kun painiketta, lohkoa tai linkkiä napsautetaan, yleensä kaiken, jolle on määritetty spoiler-title-luokka. Lohkon näyttämiseksi komentosarja käyttää vaihtomenetelmää.

Spoileri Näytä/piilota Piilotettu teksti, joka näkyy hiiren päällä

Avautuva painike on b-tunnisteen sisällä oleva teksti, kuten sanoin, voit käyttää mitä tahansa tunnistetta.

No, määritetään minimaaliset tyylit. Pääparametri on display:none lohkolle, joka piilotetaan. Tämä on välttämätöntä, muuten se ei toimi.

Spoiler-title(kursori:osoitin;).spoileri-teksti(näyttö:ei ole;tausta:#f1f1f1;)

Mitään muuta ei tarvita, kaiken pitäisi toimia. On vielä yksi kohta. Voit tehdä tästä animaatiosta hieman pehmeämmän. Voit tehdä tämän lisäämällä arvon millisekunteina suluissa vaihtotavan jälkeen.
Esimerkiksi: toggle(500) . Nyt lohko ei aukea heti, vaan puolessa sekunnissa 0,5. Avauslohko tulee näkyviin vinosti ylhäältä vasemmalta alas oikealle. Voit nähdä tämän yllä olevassa esimerkissä.

Menetelmä nro 2

Tässä menetelmässä ja kaikissa muissa käytetään samoja lohkoja ja luokkia, joten en kirjoita kaikkea uudelleen. Vain itse käsikirjoitus on erilainen.

Tämä menetelmä avaa lohkon sujuvasti ja se näkyy ylhäältä alas. Skripti tulee näkyviin käyttämällä slideToggle-menetelmää.

$(document).ready(function())( $(.spoiler-title").click(function())( $(this).parent().children(.spoiler-body").slideToggle( ) palauttaa väärin ));

Tässä, kuten ensimmäisessä vaihtoehdossa, voit muuttaa animaation aikaa. Oletuksena sen arvo on 400 millisekuntia. Jos haluat nopeuttaa tai hidastaa, lisää arvo sulkeisiin.
Esimerkki: slideToggle(600) .

Menetelmä nro 3

Tämä menetelmä on olennaisesti sama kuin toinen, samalla animaatiolla, mutta siinä on yksi mielenkiintoinen ominaisuus. Lohkon avaamiseen painettu painike muuttuu. Näkemässäsi esimerkissä se on vain tekstiä - Näytä teksti, joka muuttuu Piilota tekstiksi, kun lohko avataan.
Jos lisäät mielikuvitusta, voit lisätä tekstin sijaan kuvan tai lohkon, jota voit koristella tyyleillä. Tässä menetelmässä käytetään seuraavaa toimintoa.

$(document).ready(function())( $(.spoiler-body").hide(); $(.spoiler-title").click(function())( $(this).toggleClass( "avattu ").toggleClass("suljettu").next().slideToggle(); if($(this).hasClass("avattu")) ( $(this).html("Piilota teksti"); ) else ( $ (this).html("Näytä teksti");

Voit muuttaa animaation aikaa samalla menetelmällä kuin toisessa menetelmässä.

Siinä kaikki, nämä ovat kolme päämenetelmää, jotka halusin näyttää. Kumpi sopii sinulle, on sinun päätettävissäsi. Nyt voit helposti järjestää lohkon, joka tulee näkyviin, kun napsautat painiketta.

Käytätkö spoilereita verkkosivustollasi ja miksi?

Siinä kaikki, kiitos huomiosta. 🙂

Verkkosivustoa tai blogia luotaessa ja sen edelleen täyttämisessä sisällöllä eri syistä joskus tulee tarpeelliseksi piilottaa jokin tekstin osa, sijoittaa toistaiseksi piilotettuun lohkoon laajempaa tietoa, mutta silti ilmoittaa käyttäjälle, mitä on saatavilla jotain muuta, ja anna hänelle mahdollisuus tarkastella piilotettua sisältöä siirtymättä seuraavalle riville tai sivulle.
Aikaisemmin tällaisen ratkaisun toteuttamiseen käytettiin joukko javascriptiä, mutta nyt kaikki tämä voidaan tehdä erittäin helposti hämmästyttävien ominaisuuksien avulla.

Tänään tarkastelemme yksinkertaisinta tapaa luoda piilotettuja sisältölohkoja sivuston sivuille ja yksittäisiin viesteihin, jotka avautuvat, kun napsautat tiettyä tekstielementtiä, käyttämällä yksinomaan CSS3-ominaisuuksia. Kytkin voi olla yksittäinen sana, korostettu lause tai koko lause tai informatiivinen kuvake.
Tällaisia ​​lohkoja käytetään usein sivuilla, joilla on paljon sisältöä, jotta se olisi jäsennellympi ja kompaktimpi, kaikki sisältö on jaettu ns. ryhmiin, joissa käyttäjälle esitetään vain otsikot, kaikki teksti on oletuksena piilotettu ja se näkyy napsauttamalla tiettyä elementtiä (katso yllä).

Yritetään pärjätä ilman turhaa vettä, katsotaan koko tätä yksinkertaista mekanismia toiminnassa selkeällä esimerkillä, ja voit myös muokata jotain, jos haluat:

Esimerkki nro 1

Valitsematonta ja merkitsemätöntä tekstiä käytetään kytkiminä lisätietoa sisältäville pudotusvalikkolohkoille, yksiselitteisellä kutsulla napsauttaa sitä, mikä sinun on tehtävä ilman pelkoa tai epäilystä nähdäksesi)))

Kuten näette, kaikki toimii enemmän kuin täydellisesti, piilotettu sisältö ilmestyy ilman ongelmia ja katoaa kevyellä hiiren napsautuksella, ja samalla käytimme mahdollisimman vähän suoritettavaa koodia sekä html-kehyksessä että muodostuksessa css-tyyleistä. Ilman ylimääräisten javascript-kirjastojen yhdistämistä, ikuisen huolen kanssa, ovatko ne poistettu käytöstä käyttäjän puolella.
Kaikki tämä on mahdollista CSS3 :checked pseudo-luokan ansiosta, jota käytetään käyttöliittymäelementeissä, kuten valintanapeissa (). Todellisuudessa teimme sen, että annoimme tagissa type-attribuutille arvon valintaruudun sekä id="hd-1"-tunnisteen, joka vastaa nykyisen lohkon kytkimen yksilöllistä tunnistetta for="hd-1". Piilotamme valintaruudut perusteellisesti ja ikuisesti asettamalla näyttö: none property luokkaan.hide.
Itse asiassa tässä ei ole mitään erityistä selittävää; koko piilotettujen lohkojen päälle- ja poiskytkentämekanismi koostuu kolmesta elementistä:

• Valintaruutu - tagi, jossa on type-attribuutin valintaruutuarvo ja tietty linkitystunnus
• Otsikko (tekstikytkin) - tunniste, jolla on yksilöllinen tunnistearvo for-attribuutille (tunnisteen on oltava sama kuin syöttötunnisteen tunniste type-attribuutin valintaruudun arvon kanssa).
• Sisältölohko on div tagi, joka sisältää, parempiin aikoihin asti, kunnes käyttäjä napsauttaa, erilaista piilotettua sisältöä (tekstiä, kuvia jne. jne.)

Toivon, että kaoottisesta selityksestäni on käynyt selväksi, mikä koko pointti on. CSS käyttää uusia tyylejä (käyttäen valittua pseudoluokkaa) näyttääkseen aiemmin piilotetun sisältölohkon vain, kun käyttäjä napsauttaa elementtiä, joka liittyy valintaruutuun yksilöllisen tunnisteen avulla.

Tästä kaikesta seuraa tärkeä huomautus:

Kun käytät useita piilotettuja lohkoja samalla sivulla, jokaisella valintanapilla on oltava yksilöllinen tunnus, joka eroaa muiden lohkojen tunnuksista.

Joten sanoin olemme selvittäneet, mikä menee minne ja miksi, katsotaanpa nyt koko rakenteen html-kehystä:

< input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Klikkaa tästä avataksesi!< div>Piilotettu sisältö......< input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Klikkaa tästä lukeaksesi lisää!< div>Piilotettu sisältö...

Klikkaa tästä avataksesi! Piilotettu sisältö...... Lue lisää napsauttamalla tästä! Piilotettu sisältö...

Seuraavaksi siirrymme suoraan CSS-tyylien muodostukseen, jota ilman tämä koko suunnittelu ei toimi. Vähimmäiskoodi ilman koristeita korosti vain hieman pudotusvalikon taustaa, joka määrittää sinulle ja näyttää piilotetun tekstin kehyksen. Voit suunnitella lohkot haluamallasi tavalla, lisätä reunuksia, pyöristää kulmia, korostaa tekstiä tai .

1.CSS

. piilottaa,. piilota + otsikko ~ div ( näyttö: ei mitään; ) /* etiketin tekstin ulkoasu */ . piilota + etiketti, . piilota: valittu + otsikko (täyte: 0; väri: vihreä; kohdistin: osoitin; reuna-ala: 1px katkovihreä; ) . piilota: valittu + etiketti + div ( näyttö: lohko; tausta: #efefef; - moz- laatikko - varjo: upotettu 3px 3px 10px #7d8e8f; - webkit - laatikko - varjo: upotettu 3px 3px 10px #7d8e8f; laatikko - varjo: upotettu 3px 3px 10px #7d8e8f täyte: 10px)

/* piilota valintaruudut ja sisältölohkot */ .piilota, .piilota + etiketti ~ div ( näyttö: ei mitään; ) /* etiketin tekstin ulkoasu */ .piilota + etiketti, .piilota:valittu + etiketti ( täyte: 0; väri: vihreä ; valintaruutu on aktiivinen, näytä lohkot sisällöllä */ .hide:checked + label + div ( näyttö: lohko; tausta: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f: upotettu 3px 10px #7d8e8f: 10px;

Tämä kaikki on askeettiselle esimerkille täysin riittävä minimi. Mutta me emme ole ollenkaan me, jos emme lisää ainakin joitain herkkuja, ja on parempi kertoa käyttäjälle visuaalisesti, mistä klikata.
Toiseen esimerkkiin lisäsin yksinkertaisen plus-symbolin, joka osoittaa selvästi, että jotain muuta on piilotettu, kun sitä painetaan, se muuttuu heti miinukseksi ja lisäsin piilotettuihin lohkoihin pienen animaation, kun sitä painetaan; ne ilmestyvät, ja kaikki tämä yksinomaan CSS3:n taikuuden avulla.

2.CSS

/* piilottaa valintaruudut ja sisältölohkot */ . piilottaa,. piilota + etiketti ~ div ( näyttö: ei mitään; ) /* etiketin tekstin ulkoasu */ . piilota + otsikko ( marginaali: 0 ; täyte: 0 ; väri: vihreä; kohdistin: osoitin; näyttö: inline-block; ) /* tarratekstin ulkoasu, kun kytkin on aktiivinen */ . piilota: valittu + otsikko ( väri: punainen; reunus- alaosa: 0 ; ) /* kun valintaruutu on aktiivinen, näyttää lohkot, joissa on sisältöä */ . piilota: valittu + etiketti + div ( näyttö: lohko; tausta: #efefef; - moz- laatikko - varjo: upotettu 3px 3px 10px #7d8e8f; - webkit - laatikko - varjo: upotettu 3px 3px 10px #7d8e8f; laatikko - varjo: upotettu 3px 10px #7d8e8f marginaali: 20px /* pieni animaatio ilmestyessään help- in 0. 5s ) /* animaatio piilotettujen lohkojen ilmestyessä ; ) arvoon ( peittävyys: 1 ) ) @ avainkehykset häivyttyvät ( arvosta ( läpinäkyvyys: 0 ; ) arvoon ( peittävyys: 1 ) ) . piilota + otsikko: ennen ( taustaväri: #1e90ff; väri: #fff; sisältö: "\002 B" ; näyttö: block; float: vasen; fonttikoko: 14px; fontin paino: lihavoitu; korkeus: 16px; rivin korkeus: 16px - tasaa: keskelle - webkit - reunus: 50%; piilota: valittu + otsikko: ennen ( sisältö: "\221 2" ; )

/* piilota valintaruudut ja sisältölohkot */ .piilota, .piilota + etiketti ~ div ( näyttö: ei mitään; ) /* etiketin tekstin ulkoasu */ .piilota + etiketti ( marginaali: 0; täyte: 0; väri: vihreä; kohdistin : osoitin: inline-block ) /* tarran tekstin ulkoasu, kun kytkin on aktiivinen */ .hide: checked + label ( väri: punainen; border-bottom: 0; ) /* kun valintaruutu on aktiivinen; lohkot sisällöllä */ . hide:checked + label + div ( näyttö: block; tausta: #efefef; -moz-box-shadow: upotettu 3px 3px 10px #7d8e8f; -webkit-box-shadow: upotettu 3px 3px 10px #7d8e8f ; box-shadow: upotettu 3px 10px: 20px /* pieni animaatio, kun näkyy kun piilotetut lohkot ilmestyvät */ @-moz-keyframes häipyy ( alkaen ( läpinäkyvyys: 0; ) arvoon ( läpinäkyvyys: 1 ) ) @-webkit-keyframes häipyy ( arvosta ( läpinäkyvyys: 0 ; ) arvoon ( läpinäkyvyys: 1 ) ) @keyframes häivyttää ( alkaen ( opasiteetti: 0; ) arvoon ( opasiteetti: 1 ) ) .piilota + etiketti:ennen ( taustaväri: #1e90ff; väri: #fff; sisältö: "\002B"; näyttö: lohko; kellua: vasen; fonttikoko: 14px; fontin paino: lihavoitu; korkeus: 16px; rivin korkeus: 16 kuvapistettä; marginaali: 3px 5px; tekstin tasaus: keskellä; leveys: 16px; -webkit-border-radius: 50%; -moz-border-säde: 50%; raja-säde: 50 %; ) .hide:checked + label:before ( sisältö: "\2212"; )

Kaiken kaikkiaan menetelmä on epäilemättä hyvä, mutta kuten aina, eikä ollenkaan yllättävää, ongelmia syntyy ikuisen edistyksen jarrun, IE-selaimen, tarkistetun pseudoluokan kanssa, vain tämän 9. ja nykyaikaisemmat versiot. selain. Vanhemmissa IE-versioissa kaikki pysyy ennallaan, sinun on käytettävä javascriptiä.

Piilotettuja valintaruutuja käyttämällä voit helposti toteuttaa tyyliteltyjä lohkoja, liukusäätimiä, gallerioita ja paljon muuta.

Kaikella kunnioituksella, Andrew

Onko olemassa tapaa käsitellä napsautustapahtumia CSS:ssä ilman JavaScriptiä? Voit käyttää menetelmää kanssa :kohde. Mutta entä jos sitä ei voi käyttää? On toinenkin menetelmä.

Katso demo. Se on tehty kokonaan CSS:llä, ei JavaScript-koodirivillä. Se perustuu:active- ja:hover-valitsimien alkuperäiseen käyttöön.

Kuvaus

Ensin sinun on luotava säiliö, joka sisältää painikkeen ja lohkot, jotka tulevat näkyviin, kun hiirtä painetaan. Merkintärakenne tulee olemaan jotain tällaista:

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit.

Painike

Meidän on tehtävä .sisällöstä näkymätön, kunnes hiiren painiketta painetaan .wrapperin kohdalla. Ratkaise ongelma asettamalla .content-ominaisuuden näyttö: none . Sitten, kun hiiren painiketta painetaan .wrapperin kohdalla, sisällytämme näyttöön: block -ominaisuuden .contentille. Miksi asettaa .wrapper:active .content -ominaisuus display: block . Tässä tilassa .content näkyy vain, kun hiiren painiketta painetaan. Jos vapautat sen, .content katoaa uudelleen. Korjataksemme tämän varmistamalla, että kun hiiren osoitin on .content -kohdan päällä, elementille määritetään display: block -ominaisuus. Eli asetamme .content:hover-ominaisuuden display: block -ominaisuuden. CSS-koodi näyttää tältä:

Sisältö ( näyttö: ei mitään; ) .wrapper:active .content ( näyttö: lohko; ) .content:hover ( näyttö: lohko; )

Jäljelle jää vain "kampaa" ulkonäkö ja antaa sille selkeys:

Kääre ( sijainti: suhteellinen; ) .button ( tausta: keltainen; korkeus: 20px; leveys: 150px; ) .content ( sijainti: absoluuttinen; pehmuste-ylä: 20px; ) .content li ( tausta: punainen; )

Yllä olevan koodin painiketeksti on keltaisella taustalla ja hiiren painiketta painettaessa näkyvät tiedot punaisella taustalla.

Lähes jokaisella sivustolla voit nähdä painikkeita - lisätietoja, tiedot, avata/piilota tiedot ja vastaavat. Kun napsautat niitä, lohko, jossa on tarvittavat tiedot, avautuu vähitellen. Miten tämä toteutetaan?

Tarpeeksi yksinkertainen. JS:n (jQuery-kirjasto) käyttö. Yhdistä se Googlen palvelimelta:

Nyt koko esimerkki. Jotta en hajottaisi sitä osiin ja en hämmennä sinua, kommentoin kaikkia sen pääkohtia.

$(dokumentti).ready(function() (
$("A#trigger").toggle(function() (
// Näytä piilotettu lohko
$("DIV#box").fadeIn(); // fadeIn - sileä ulkonäkö

},
funktio() (
// Piilota lohko
$("DIV#box").fadeOut(); // fadeOut - tasainen katoaminen
palauttaa väärä; // älä seuraa linkkiä
)); // toggle() loppu
)); // valmiin loppu()

Näytä/piilota tiedot
Piilotettu estosisältö

Älä unohda, että tässä esimerkissä yhdistämme jQueryn etäyhteyden kautta. Esimerkki ei toimi paikallisessa tietokoneessa ilman Internet-yhteyttä.
Katsotaanpa tulosta lohkon avaamisesta ja piilottamisesta jQuerylla:

Kuinka luoda spoilereita jqueryyn tai useisiin avaus-/sulkemislohkoihin? Lukijoiden lukuisten pyyntöjen vuoksi luon erillisen osion, jossa on esimerkki ja ladattavat tiedostot. Jos sinulla on useita spoilerilohkoja, jotka on avattava ja suljettava sujuvasti jqueryllä tai jos tarvitset komentoja sulkeaksesi tai avataksesi kaiken, katso alla oleva esimerkki:

Spoilerit

$(dokumentti).ready(funktio())(
$(.spoiler_links").click(function())(
$(this).parent().children("div.spoiler_body").toggle("normaali");
palauttaa väärä;
});
});

.spoiler_body (näyttö:ei mitään;)
.spoiler_links (kursori:osoitin;)

Spoileri nro 1 näytä/piilota

Teksti ensimmäisessä spoilerissa
Teksti ensimmäisessä spoilerissa

Spoileri nro 2 näyttää / piilottaa

Teksti toisessa spoilerissa
Teksti toisessa spoilerissa

Esimerkki on koottu kokonaan. Tarvitset vain Internet-yhteyden ladataksesi jQueryn Google-kirjastoista.