Öppna div på klicka jquery. Öppna och dölja en div smidigt med jQuery
Finns det något sätt att bearbeta klicka på händelser på CSS utan använder JavaScript. Du kan använda metoden med :mål. Men vad händer om det inte kan användas? Det finns en annan metod.
Se demon. Den är helt gjord i CSS, inte en enda rad JavaScript-kod. Den är baserad på den ursprungliga användningen av:active och:hoverväljarna.
Beskrivning
Först måste du skapa en behållare som kommer att innehålla en knapp och block som visas när du trycker på musen. Uppmärkningsstrukturen kommer att vara ungefär så här:
Vi måste göra .content osynligt tills du trycker på musknappen på .wrapper. För att lösa problemet, ställ in egenskapen .content display: none . Sedan, när musknappen trycks på .wrapper, kommer vi att inkludera displayen: block-egenskap för .content. Varför ställa in egenskapen .wrapper:active .content display: block . I det här läget kommer .content endast att vara synligt när du trycker på musknappen. Om du släpper den försvinner .content igen. För att fixa detta, låt oss se till att när muspekaren är över .content tilldelas elementet egenskapen display: block. Det vill säga vi ställer in egenskapen display: block för .content:hover. CSS-koden kommer att se ut så här:
Innehåll ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )
Allt som återstår är att "kamma det" utseende och gör det tydligare:
Omslag (position: relativ; ) .knapp (bakgrund: gul; höjd: 20px; bredd: 150px; ) .content (position: absolut; padding-top: 20px; ) .content li (bakgrund: röd; )
Knapptexten i ovanstående kod kommer att ha gul bakgrund, och informationen som visas genom att trycka på musknappen har en röd bakgrund.
Idag kommer vi att prata med dig om hur du kan dölja ett element genom att klicka på det. Eller klicka för att visa det. Eller vid det första klicket - dölj, och vid det andra klicket - visa. Generellt sett tror jag att du förstår vad jag pratar om. Något liknande beskrevs i den här artikeln.
Men idag blir allt annorlunda. Effekten kommer att vara densamma, men den försvinner snabbt, omedelbart och inte smidigt. För att göra detta, låt oss skapa samma uppmärkning:
< div class = "block" > < h1 class = "extremum-click" >Tekannor < div class = "extremum-slide" >Den här historien handlar om hur jag en gång gick in i skogen för att plocka svamp och hittade en magisk tekanna.Låt oss nu skriva stilarna. Som standard är textblocket dolt. Låt oss lägga till lite visuella effekter och viktigast av allt, vi kommer att förbättra manuset något. Genom att klicka på titeln kommer vi att markera den med färg. Här är stilarna:
.extremum-slide (kant: 1px solid; stoppning: 50px; display: ingen; ) .red (bakgrundsfärg: röd;)Nu är själva manuset, som kommer att väcka det här till liv:
$(dokument) .ready (funktion () ( $(".block") .on ("klicka", ".extremum-klicka" , funktion () ( $(this ) .toggleClass ("röd" ) .syskon ( ".extremum-slide" ) .slideToggle (0 ) ) );Det är allt - du kan njuta av resultatet. Det finns inget speciellt att berätta: vi klickar på title.extremum-click, text.extremum-slide visas och samtidigt markeras samma titel. Nästa gång du klickar på titeln försvinner textblocket.
Kod för alla sidor:
<html > <huvudet > <meta charset = "utf-8" > <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> <stil >.extremum-slide (border:1px solid; padding:50px; display:none; ) .red (bakgrundsfärg:röd;)</stil> <manus >$(document).ready(function() ( $(".block").on("klick", ".extremum-click", function() ( $(this).toggleClass("red").siblings( ".extremum-slide").slideToggle(0 ));</script> </huvud> <kroppen > <div class = "block" > <h1 class = "extremt-klick" > Tekannor</h1> <div class = "extremum-slide" > </div> </div> <div class = "block" > <h1 class = "extremt-klick" > Tekannor</h1> <div class = "extremum-slide" > Den här historien handlar om hur jag en gång gick in i skogen för att plocka svamp och hittade en magisk tekanna.</div> </div> <div class = "block" > <h1 class = "extremt-klick" > Tekannor</h1> <div class = "extremum-slide" > Den här historien handlar om hur jag en gång gick in i skogen för att plocka svamp och hittade en magisk tekanna.</div> </div> </kropp> </html>De flesta av er kommer att säga det efter att ha läst rubriken på den här artikeln hantera klickhändelser i CSS omöjlig. Detta är dock inte riktigt sant. Och i den här artikeln kommer jag att visa hur du kan hantera klickhändelser med endast CSS.
Låt oss säga att vi har en viss flik, genom att klicka på vilken ska öppna innehållet på den här fliken. Den absoluta majoriteten kommer att göra allt detta vidare JavaScript, men faktiskt i I detta fall, klickhändelsen kan enkelt hanteras via CSS.
Till att börja med det vanligaste HTML-kod:
Inget ovanligt, förutom att fliknamnet finns under innehållet, senare kommer du att förstå varför. Och nu CSS-kod:
Flikar (
flyta till vänster; /* Placera alla flikar på en rad */
marginal: 10px; /* Dra in flikar från varandra */
}
.innehåll(
display: ingen; /* Göm innehållet */
padding-top: 20px; /* Så att fliktiteln ligger under innehållet */
position: absolut; /* För att förhindra innehåll från att flytta element på sidan */
}
.tabs:active .content (
display: block; /* När vi klickar på fliken öppnar vi innehållet */
}
.content:hover (
display: block; /* Medan markören svävar över innehållet, stäng det inte */
}
Algoritmen är som följer: när du klickar på namnet på fliken triggas pseudoelementet automatiskt aktiva, men eftersom det bara kommer att fungera när knappen trycks ned, så fort vi släpper den, kommer innehållet att stängas. För att förhindra att detta händer lägger vi till ett villkor att om markören förs över innehållet (pseudo-element sväva), så stängs den inte. Och för att vår markör automatiskt ska hamna på innehållet genom att klicka på fliken placerade vi knappen under innehållet och lade även till ett fält ovanpå. Således, genom att klicka på namnet på fliken, klickar vi på innehållet också, så efter att ha klickat kan vi säkert släppa musknappen, och vi kommer att fortsätta att "hålla" innehållet medan vi håller markören.
I processen att skapa en webbplats eller blogg och ytterligare fylla den med innehåll, olika anledningar, ibland finns det ett behov av att dölja en del av texten, placera mer omfattande information i ett block som är dolt för tillfället, men ändå indikera för användaren att det finns något annat, och ge honom möjlighet att se det dolda innehållet utan att gå till nästa rad eller sida.
Tidigare användes ett gäng javascript för att implementera en sådan lösning, men nu kan allt detta göras mycket enkelt med hjälp av fantastiska egenskaper.
Idag ska vi titta på det enklaste sättet skapas på webbplatsens sidor och i separata meddelanden, dolda innehållsblock som expanderar när du klickar på ett specifikt textelement, med rena CSS3-egenskaper. Omkopplaren kan också fungera som separat ord, och en markerad fras, samt en hel mening eller en informativ ikon.
Sådana block används ofta på sidor med en stor mängd innehåll, för att göra det mer strukturerat och kompakt är allt innehåll uppdelat i så kallade grupper, där endast rubriker presenteras för användaren, all text är dold som standard och kan ses genom att klicka på ett specifikt element (se ovan).
Låt oss försöka klara oss utan överflödigt vatten, titta på hela denna enkla mekanism i aktion, kl tydligt exempel, du kan också redigera vad som helst om du vill:
Exempel nr 1
Som omkopplare för rullgardinsblock med ytterligare information text som inte är markerad eller markerad på något sätt används, med en entydig inbjudan att klicka på den, vilket du måste göra utan rädsla eller tvivel för att se)))
Som du kan se fungerar allt mer än perfekt, dolt innehåll dyker upp utan problem och försvinner med ett lätt musklick, och samtidigt använde vi det absoluta minimum körbar kod, både i html-ramverket och i bildandet av css-stilar. Utan att ansluta ytterligare javascript bibliotek, med den eviga oron om de är inaktiverade på användarens sida.
Att implementera all denna åtgärd blev möjligt tack vare CSS3-pseudoklassen :kontrollerade, tillämpas på gränssnittselement som alternativknappar (). Vad vi faktiskt gjorde i taggen Vi tilldelade typattributet värdekryssrutan , samt identifieraren id="hd-1" som motsvarar den unika identifieraren for="hd-1" strömbrytare. Vi kommer att dölja kryssrutorna grundligt och för alltid genom att ställa in displayen: ingen egenskap i class.hide;
Egentligen finns det inget speciellt att förklara här hela mekanismen för att slå på och av dolda block består av tre element:
- Kryssruta - tagg med mening kryssruta attribut typ och med en specifik länkidentifierare
- Titel (textväxling) - tagg med ett unikt identifierarvärde för attributet för, (identifieraren måste vara densamma som taggidentifieraren inmatning med mening kryssruta attribut typ).
- Innehållsblocket är en div-tagg, som kommer att innehålla, tills bättre tider, tills användaren klickar, olika dolt innehåll (text, bilder, etc., etc.)
Jag hoppas att det av min kaotiska förklaring har blivit tydligt vad hela poängen är. CSS tillämpar nya stilar (med pseudoklassen kontrollerade) för att visa ett innehållsblock som tidigare var dolt endast när användaren klickar på ett element som är associerat med en kryssruta med en unik identifierare.
Av allt detta följer Viktig notering:
När du använder flera dolda block på samma sida måste varje alternativknapp ha ett unikt ID som skiljer sig från ID:n i andra block.
Så, i ord har vi sorterat ut vad som går vart och varför, nu, låt oss titta på html-ramverket för hela strukturen:
| < input class = "hide" id= "hd-1" type= "checkbox" > < label for = "hd-1" >Klicka här för att öppna! < div>Dolt innehåll...... < input class = "hide" id= "hd-2" type= "checkbox" > < label for = "hd-2" >Klicka här för att läsa mer! < div>Dolt innehåll... |
Därefter går vi direkt till formationen CSS-stilar, utan vilken hela strukturen inte kommer att fungera. Ett minimum av kod, utan någon dekoration, framhävde bara bakgrunden för rullgardinsmenyn för att definiera för dig och visa ramen för den dolda texten. Du kan designa blocken som du vill, lägga till kanter, runda hörn, markera text eller .
1.CSS
| . Dölj, . dölj + etikett ~ div ( visa: ingen; ) /* etikett texttyp */. dölj + etikett, . dölj: markerad + etikett (utfyllnad: 0; färg: grön; markör: pekare; kant-botten: 1 px grön prickad; ). hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f stoppning: 10px ) |
/* dölj kryssrutor och innehållsblock */ .hide, .hide + label ~ div ( display: none; ) /* etikett textens utseende */ .hide + label, .hide:checked + label ( utfyllnad: 0; färg: grön ; markör: pekare; border-bottom: 1px prickad grön; kryssrutan är aktiv, visa block med innehåll */ .hide:checked + label + div ( display: block; background: #efefef; -moz-box-shadow: inset 3px 3px 10px #7d8e8f; -webkit-box-shadow: inset 3px 3px 10px #7d8e8f: infälld 3px 3px 10px #7d8e8f: 10px;
Detta är allt, för ett asketiskt exempel, ett fullständigt tillräckligt minimum. Men vi kommer inte att vara vi alls om vi inte lägger till åtminstone några godsaker, och det är bättre att visuellt tala om för användaren var den ska klicka.
I det andra exemplet lade jag till en enkel symbol i form av ett plus, som tydligt indikerar att något annat är gömt här när det klickas, förvandlas det omedelbart till ett minus, och dolda block med innehållet, lagt till lite animation när det dyker upp, och allt detta uteslutande med hjälp av magin i CSS3.
2.CSS
| /* dölj kryssrutor och innehållsblock */. Dölj, . dölj + etikett ~ div ( visa: ingen; ) /* etikett texttyp */. dölj + etikett (marginal: 0; utfyllnad: 0; färg: grön; markör: pekare; display: inline-block;) /* utseendet på etiketttexten när omkopplaren är aktiv */. dölj: markerad + etikett (färg: röd; kant-botten: 0; ) /* när kryssrutan är aktiv, visa block med innehåll */. hide: checked + label + div ( display: block; background: #efefef; - moz- box- shadow: inset 3px 3px 10px #7d8e8f; - webkit- box- shadow: inset 3px 3px 10px #7d8e8f; box- shadow: inset 3px 3px 10px #7d8e8f marginal-vänster: 20px; /* lite animation när den dyker upp */- webkit- animering: lätt tona- på 0. 5s; - moz- animation: fade ease- på 0. 5s; animation: fade ease- in 0. 5s; ) /* animering när dolda block visas */@- moz- keyframes fade ( från ( opacitet: 0 ; ) till ( opacitet: 1 ) ) @- webkit- keyframes fade ( från ( opacitet: 0 ; ) till ( opacitet: 1 ) ) @ keyframes fade ( från ( opacitet: 0 ; ) till ( opacitet: 1 ) ) . dölj + etikett: före ( bakgrundsfärg: #1e90ff; färg: #fff; innehåll: " \002 B"; display: block; flyta till vänster; \221 2" ; } |
teckenstorlek: 14px; font-weight: fet; höjd: 16px; linjehöjd: 16px; marginal: 3px 5px; text-align: center; bredd: 16px; - webkit- border- radie: 50%; - moz- gräns- radie: 50%; gränsradie: 50%; ) . hide: checked + label: before ( innehåll: "
Av allt att döma är metoden utan tvekan bra, men som alltid, och inte alls förvånande, uppstår problem med den eviga bromsen på utvecklingen, IE-webbläsaren, pseudoklass kontrollerade stöder endast 9:e eller fler moderna versioner denna webbläsare. För äldre versioner av IE förblir allt detsamma, du måste använda javascript.
Med hjälp av dolda kryssrutor kan du enkelt implementera stiliserade block, skjutreglage, gallerier och mycket mer.
Med all respekt, Andrew