არის თუ არა გზა CSS-ში დაწკაპუნების მოვლენებზე JavaScript-ის გამოყენების გარეშე. თქვენ შეგიძლიათ გამოიყენოთ მეთოდი : სამიზნე. მაგრამ რა მოხდება, თუ მისი გამოყენება შეუძლებელია? არის სხვა მეთოდიც.

ნახეთ დემო. ის მთლიანად დამზადებულია CSS-ში და არა JavaScript კოდის ხაზი. ის ეფუძნება:active და:hover სელექტორების თავდაპირველ გამოყენებას.

აღწერა

პირველ რიგში, თქვენ უნდა შექმნათ კონტეინერი, რომელიც შეიცავს ღილაკს და ბლოკებს, რომლებიც გამოჩნდება მაუსის დაჭერისას. მარკირების სტრუქტურა დაახლოებით ასეთი იქნება:

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit.

ღილაკი

ჩვენ უნდა გავხადოთ .შინაარსი უხილავი მანამ, სანამ მაუსის ღილაკს არ დააჭერთ .შეფუთვას. პრობლემის გადასაჭრელად დააყენეთ .content თვისების ჩვენება: none . შემდეგ, როდესაც მაუსის ღილაკს დააჭერთ .wrapper-ზე, ჩვენ დავამატებთ ჩვენებას: block თვისებას .content-ისთვის. რატომ დააყენეთ .wrapper:active .content თვისების ჩვენება: ბლოკი. ამ მდგომარეობაში, .content გამოჩნდება მხოლოდ მაუსის ღილაკზე დაჭერისას. თუ გაათავისუფლებთ, .კონტენტი ისევ გაქრება. ამის გამოსასწორებლად დავრწმუნდეთ, რომ როდესაც მაუსის კურსორი დასრულდა .content , ელემენტს ენიჭება display: block თვისება. ანუ ჩვენ დავაყენეთ display: block თვისება .content:hover-ისთვის. CSS კოდი ასე გამოიყურება:

კონტენტი ( ჩვენება: არცერთი; ) .შეფუთვა: აქტიური .კონტენტი ( ჩვენება: დაბლოკვა; ) .კონტენტი:ჰოვერი ( ჩვენება: დაბლოკვა

რჩება მხოლოდ "დავარცხნა" გარეგნობადა უფრო ნათლად ახსენი:

შეფუთვა (პოზიცია: შედარებითი;) .ღილაკი (ფონი: ყვითელი; სიმაღლე: 20 პიქსელი; სიგანე: 150 პიქსელი; )

ზემოთ მოცემულ კოდში ღილაკის ტექსტს ექნება ყვითელი ფონი, ხოლო ინფორმაცია, რომელიც გამოჩნდება მაუსის ღილაკის დაჭერისას - წითელი ფონი.

სპოილერი არის ინფორმაციის ბლოკი, რომელიც თავდაპირველად იმალება მომხმარებლებისგან და ჩნდება მხოლოდ მაშინ, როდესაც მომხმარებელი დააჭერს გარკვეულ ღილაკს. ჩემს საიტზე, სპოილერის სახით, არის კომენტარების დამატების წესები. თუ დააწკაპუნებთ სიტყვა RULES-ზე, რომელიც მონიშნულია, ქვემოთ გაიხსნება ბლოკი წესებით.

როგორც ზემოთ დავწერე, მე გაჩვენებთ რამდენიმე მეთოდს, რომლებიც არსებითად მსგავსია, მაგრამ იყენებენ სხვადასხვა სკრიპტებს და ასრულებენ სხვადასხვა ანიმაციას. ქვემოთ მოცემულია მაგალითები.

მოდით შევხედოთ თითოეულ მეთოდს თანმიმდევრობით, რათა შეძლოთ რომელიმე მათგანის გამოყენება თქვენს ვებსაიტზე. მაგრამ სანამ ამას გავაკეთებთ, მოდით განვსაზღვროთ jquery ბიბლიოთეკა. თუ მანამდე დააკავშირეთ, მაშინ დაიწყეთ მეთოდების ყურება, თუ არა, მაშინ დააკავშირეთ იგი სათაურში ან ქვედა კოლონტიტულში.

ახლა მოდით წავიდეთ თანმიმდევრობით.

მეთოდი No1

ფაქტობრივად, უმარტივეს მეთოდს, დაწკაპუნებისას, ბლოკი მყისიერად ჩნდება. ხელახლა დაჭერისას ის მყისიერად ქრება. ეს მარტივია. ეს მეთოდიმეც ვიყენებ.

დაამატეთ ძალიან მარტივი სკრიპტი. თქვენ შეგიძლიათ დაამატოთ ის პირდაპირ იმ ადგილას, სადაც გსურთ ბლოკის ჩვენება, შეგიძლიათ დააკავშიროთ იგი სათაურში ან ქვედა კოლონტიტში, ან შეგიძლიათ განათავსოთ ის ფაილში, რომელიც შემდეგ შეგიძლიათ კვლავ დაუკავშიროთ საიტს, ნებისმიერ ადგილას.

$(დოკუმენტი).ready(function())($(".spoiler-body").hide();$(".spoiler-title").დააწკაპუნეთ(function())($(this).next( გადართვა ()));

სკრიპტი მუშაობს ბლოკთან, რომელსაც ენიჭება სპოილერის-სხეულის კლასი და აჩვენებს მას, როდესაც ღილაკზე, ბლოკზე ან ბმულზე დაწკაპუნებულია, ზოგადად, ყველაფერზე, რომელსაც აქვს მინიჭებული სპოილერის სათაურის კლასი. ბლოკის საჩვენებლად სკრიპტი იყენებს გადართვის მეთოდს.

სპოილერის ჩვენება/დამალვა დამალული ტექსტი, რომელიც გამოჩნდება hover-ზე

ღილაკი, რომელიც გაიხსნება იქნება b ტეგის შიგნით არსებული ტექსტი, როგორც ვთქვი, შეგიძლიათ გამოიყენოთ ნებისმიერი ტეგი.

მოდით, მივანიჭოთ მინიმალური სტილები. მთავარი პარამეტრი არის ჩვენება: არცერთი ბლოკისთვის, რომელიც დაიმალება. ეს აუცილებელია, წინააღმდეგ შემთხვევაში არ იმუშავებს.

სპოილერი-სათაური(კურსორი:pointer;).სპოილერი-სხეული(ჩვენება:არცერთი;ფონი:#f1f1f1;)

სხვა არაფერია საჭირო, ყველაფერი უნდა მუშაობდეს. არის კიდევ ერთი წერტილი. თქვენ შეგიძლიათ ეს ანიმაცია ოდნავ უფრო გლუვი გახადოთ. ამისათვის დაამატეთ მნიშვნელობა მილიწამებში გადართვის მეთოდის შემდეგ ფრჩხილებში.
მაგალითად: toggle(500) . ახლა ბლოკი არ გაიხსნება მყისიერად, მაგრამ ნახევარ წამში 0.5. გახსნის ბლოკი გამოჩნდება დიაგონალზე ზემოდან მარცხნიდან ქვედა მარჯვნივ. ამის ნახვა შეგიძლიათ ზემოთ მოცემულ მაგალითში.

მეთოდი No2

ამ მეთოდისთვის და ყველა დანარჩენისთვის გამოყენებული იქნება იგივე ბლოკები და კლასები, ამიტომ ყველაფერს აღარ დავწერ. მხოლოდ თავად სცენარი იქნება განსხვავებული.

ეს მეთოდი შეუფერხებლად ხსნის ბლოკს და ის ჩნდება ზემოდან ქვემოდან. გამოსაჩენად სკრიპტი იყენებს slideToggle მეთოდს.

$(დოკუმენტი).ready(function())($(".spoiler-title").click(function())($(this).parent().children(".spoiler-body").slideToggle( დაბრუნება false ));

აქ, როგორც პირველ ვარიანტში, შეგიძლიათ შეცვალოთ ანიმაციის დრო. ნაგულისხმევად მისი მნიშვნელობა არის 400 მილიწამი. თუ გსურთ დააჩქაროთ ან შეანელოთ, დაამატეთ მნიშვნელობა ფრჩხილებში.
მაგალითად: slideToggle(600) .

მეთოდი No3

ეს მეთოდი არსებითად იგივეა, რაც მეორე, იგივე ანიმაცია, მაგრამ მას აქვს ერთი საინტერესო თვისება. ბლოკის გასახსნელად დაჭერილი ღილაკი იცვლება. თქვენს მიერ ნანახ მაგალითში ეს მხოლოდ ტექსტია - ტექსტის ჩვენება, რომელიც ბლოკის გახსნისას იცვლება ტექსტის დამალვაში.
თუ ფანტაზიას დაამატებთ, ტექსტის ნაცვლად შეგიძლიათ დაამატოთ სურათი ან ბლოკი, რომელიც შეგიძლიათ დაამშვენოთ სტილებით. ამ მეთოდში გამოიყენება შემდეგი ფუნქცია.

$(დოკუმენტი).ready(function())($(".spoiler-body").hide();$(".spoiler-title").click(function())($(this).toggleClass( "გახსნილია").toggleClass("დახურულია").next().slideToggle(if($(this).hasClass("გახსნილია")) ($(this).html("ტექსტის დამალვა"); ) else; ( $ (this).html("ტექსტის ჩვენება");

თქვენ შეგიძლიათ შეცვალოთ ანიმაციის დრო იგივე მეთოდით, როგორც მეორე მეთოდით.

ძირითადად ეს ასეა, ეს არის სამი ძირითადი მეთოდი, რომლის ჩვენებაც მინდოდა. რომელია თქვენთვის სწორი, თქვენი გადასაწყვეტია. ახლა თქვენ შეგიძლიათ მარტივად მოაწყოთ ბლოკი, რომელიც გამოჩნდება ღილაკზე დაჭერის შემდეგ.

იყენებთ სპოილერებს თქვენს ვებსაიტზე და რატომ?

სულ ესაა, მადლობა ყურადღებისთვის. 🙂

დღეს ჩვენ ვისაუბრებთ იმაზე, თუ როგორ შეგიძლიათ დამალოთ ელემენტი მასზე დაწკაპუნებით. ან დააწკაპუნეთ მის საჩვენებლად. ან პირველ დაწკაპუნებაზე - დამალვა, ხოლო მეორე დაწკაპუნებაზე - ჩვენება. ზოგადად, ვფიქრობ, გესმით, რაზეც ვსაუბრობ. მსგავსი რამ იყო აღწერილი ამ სტატიაში.

მაგრამ დღეს ყველაფერი სხვაგვარად იქნება. ეფექტი იგივე იქნება, მაგრამ ის გაქრება სწრაფად, მყისიერად და არა შეუფერხებლად. ამისათვის შევქმნათ იგივე მარკირება:

< div class = "block" > < h1 class = "extremum-click" >ჩაიდანები< div class = "extremum-slide" >ეს ამბავი იმაზეა, თუ როგორ წავედი ტყეში სოკოს საკრეფად და ვიპოვე ჯადოსნური ჩაიდანი.

ახლა მოდით დავწეროთ სტილები. ნაგულისხმევად, ტექსტის ბლოკი დამალულია. მოდით დავამატოთ ვიზუალური ეფექტები და რაც მთავარია, ოდნავ გავაუმჯობესებთ სკრიპტს. სათაურზე დაწკაპუნებით მას ფერით გამოვყოფთ. აქ არის სტილები:

.extremum-slide (საზღვარი: 1px მყარი; padding: 50px; ჩვენება: არცერთი;) .წითელი (ფონის ფერი: წითელი;)

ახლა კი თავად სცენარი, რომელიც ამ ყველაფერს გააცოცხლებს:

$(დოკუმენტი) .ready (ფუნქცია () ( $(".block") .on ("click" , ".extremum-click" , ფუნქცია () ($(this) .toggleClass ("წითელი") .ძმები ("წითელი") ".extremum-slide") .slideToggle (0) );

სულ ეს არის - შედეგით შეგიძლიათ ისიამოვნოთ. არაფერი განსაკუთრებული არ არის სათქმელი: ვაწკაპუნებთ სათაურზე.extremum-click, ნაჩვენებია text.extremum-slide და ამავე დროს მონიშნულია იგივე სათაური. სათაურზე დაწკაპუნების შემდეგ ტექსტის ბლოკი ქრება.

ყველა გვერდის კოდი:

.extremum-slide ( საზღვარი:1px მყარი; padding:50px; ჩვენება:არცერთი; ) .red (ფონის ფერი:წითელი; ) $(დოკუმენტი).ready(function() ($(".block").on( "click", ".extremum-click", function() ( $(this).toggleClass("წითელი").ძმები (".extremum-slide").slideToggle(0); ));

ჩაიდანი ჩაიდანი ეს ისტორია მოგვითხრობს იმაზე, თუ როგორ შევედი ტყეში სოკოს საკრეფად და ვიპოვე ჯადოსნური ჩაიდანი. ჩაიდანი ეს ამბავი იმაზეა, თუ როგორ შევედი ტყეში სოკოს საკრეფად და ვიპოვე ჯადოსნური ჩაიდანი.ხშირად ჩვენს პროექტებში გვჭირდება კონკრეტული ქმედების მიბმა მომხმარებლის ქმედებებთან. მაგალითად, როდესაც თქვენ დააწკაპუნებთ მაუსის მარცხენა ღილაკს გარკვეულ დივზე (ბლოკზე), ამ ბლოკის ფერი იცვლება. ზოგადად, მაუსის მარცხენა ღილაკზე დაჭერას დაწკაპუნება ეწოდება. ამ მოვლენის დასამუშავებლად ძირითადად გამოიყენება javascript და jquery, მაგრამ ასევე შესაძლებელია

css-ის გამოყენებით

დააჭირეთ სიმღერას. სწორედ ამაზე ვისაუბრებთ ამ პოსტში. რა თქმა უნდა, ჩნდება ლეგიტიმური კითხვა: რატომ აკონტროლოთ CSS დაწკაპუნებით, ყველაფერი კარგად მუშაობს Javascript-ის გამოყენებით. მაგრამ თუ js გამორთულია მომხმარებლის ბრაუზერში, მაშინ საიტის ფუნქციონირება არ იქნება დასრულებული და css დაწკაპუნება ყოველთვის იმუშავებს. არსებობს რამდენიმე მეთოდი css click მოვლენის დასამუშავებლად. პირველი "შემოწმებულია"

"შემოწმებული" მეთოდი

ჯერ დავწეროთ html და css კოდი.

დააწკაპუნეთ მე

თუ ფონი წითელია, ჩამრთველი არჩეულია

მოდით შევხედოთ კოდს. ჩვენ გვაქვს სამი ბლოკი.box, .noncheck1, .check. ისინი ყველა განლაგებულია ერთმანეთთან შედარებით ისე, რომ .check ბლოკი იყოს .noncheck1-ის ქვეშ. მე არ ჩავდე ღილაკების CSS სიაში, რადგან ეს არ არის მნიშვნელოვანი. ახლა კი ჩვენ ვიწყებთ "შემოწმებული" მეთოდის გაგებას. მეთოდი დაფუძნებულია საკონტროლო ველის ელემენტისა და მისი მონიშნული ატრიბუტის გამოყენებაზე. ჩვენ ვაწკაპუნებთ ჩამრთველზე და მისი მდგომარეობა იცვლება მონიშნულად. ჩვენ ვამაგრებთ ცვლილებას ამ მოვლენასთან css სელექტორების „~“ ან „+“ გამოყენებით. მაგალითად, გარკვეული ელემენტის ტექსტის ან ფონის ფერის შეცვლა. მაგალითში ვირჩევთ checkbox-ს და div.box-ში div.noncheck1 ხდება უხილავი (ჩვენება: none), ჩვენ ვხედავთ div.check. იმისთვის, რომ ფონის მდგომარეობის შეცვლა ღილაკად შევქმნათ, ჩვენ ვანიჭებთ ლეიბლს ჩვენს ჩამრთველს და ვქმნით ღილაკს მისგან. ახლა ჩვენ არ გვჭირდება ჩამრთველი (ჩვენ გვაქვს ღილაკი) და ვმალავთ მას (ჩვენება: არცერთი)

მეთოდი "სამიზნე" ჩართულია გამორთული .noncheck2:target( ჩვენება: არცერთი; )

სამიზნე მეთოდი მუშაობს ამ პრინციპზე. ჩვენ ვქმნით ღილაკს.butt2 ბმულით On. ბმულზე ჩვენ ვანიჭებთ ჰეშის ტეგს "#On". როდესაც თქვენ დააწკაპუნებთ ბმულზე ღილაკის სახით ჰეშთეგით, გადადიხართ div-ზე id="On". ეს div ხვდება მიზანს. სამიზნე ფსევდოკლასი გააქტიურებულია. ჩვენ დავმალეთ div.noncheck2 ამ მოვლენისთვის ასევე ჩვენების გამო: არცერთი. როდესაც თქვენ დააწკაპუნებთ სხვა ბმულის ღილაკს, div ტოვებს სამიზნეს, რადგან სამიზნე გადადის სხვა ბლოკში. Div.noncheck2 კვლავ გამოჩნდება.

მეთოდი "tabindex" ჩართულია გამორთული .butt4:focus ~.box .noncheck3 (ჩვენება: არცერთი; )

ეს მეთოდი ეფუძნება tabindex ატრიბუტის გამოყენებას. ეს მდგომარეობს იმაში, რომ ჩვენ შეგვიძლია დავაყენოთ შეყვანის ფოკუსი ვებ გვერდის ზოგიერთ ელემენტზე tabindex-ის გამოყენებით. ელემენტი იღებს ფოკუსის მოვლენას (.butt4:focus), რომელიც შეიძლება დამუშავდეს CSS-ის გამოყენებით. ჩვენ ვიყენებთ "~" მეზობელ სელექტორს, რათა მივაკუთვნოთ ჩვენება: none მდგომარეობა .noncheck3 ელემენტს, როდესაც ხდება .butt4:focus მოვლენა. როდესაც ჩვენი ფოკუსი გადადის ღილაკიდან სხვა გვერდის ელემენტზე, noncheck3 უბრუნდება თავდაპირველ მდგომარეობას.