Хорлон сүйтгэгч нь сайтын тохиромжтой хэрэгсэл юм. Энэ нь янз бүрийн форум, блогуудад өргөн хэрэглэгддэг бөгөөд товчлуур дарах үед хэрэглэгч тодорхой элементийг нуух боломжийг олгодог. Түүнээс гадна, хорлон сүйтгэгч нь сайт дээр сайн харагдаж, хуудсыг хэт их ачаалдаг хэсгүүдийг нуухад тусалдаг.
Энэ нь зайлшгүй шаардлагатай
Jquery номын сан
Зааварчилгаа
1-р алхам
Хорлон сүйтгэгчийг Java Script програмчлалын хэл дээр бичигдсэн түгээмэл jquery залгаасын номын санг ашиглан хэрэгжүүлж болно. Энэ нь хуудасны HTML тэмдэглэгээний кодтой програмчлалын хэлний бүрэн харилцан үйлчлэлийг хэрэгжүүлэхэд хэрэглэгддэг. Jquery холболтыг HTML ашиглан хаягийг ашиглан хийдэг. Та скрипт байрлаж буй байршлыг зааж өгөх ба түүний төрлийг тохируулах ёстой: $ (document).ready (function ()
Алхам 2
Тодорхой догол мөрөнд заасан текст фрагментийг тусад нь давхаргад оруулах ёстой бөгөөд үүнийг ашиглан spoiler өөрөө хянах болно: Саша хурдны замаар явж, хатаахыг соров.
Алхам 3
Дараа нь та бүх divs-ийн өмнө spoil харгалзах товчлууруудыг үүсгэх хэрэгтэй бөгөөд энэ нь текстийг нурааж өргөжүүлэх болно. Нэгдүгээрт, хорлон сүйтгэгч өөрөө стандарт "hide ()" функцийг ашиглан нуугддаг: $ (“div [name = 'spoil']”). Hide (); Дараа нь та бүх хорлон сүйтгэгчдэд зориулж текст, зураг үүсгэх хэрэгтэй. товчлууруудын дэвсгэр болгон ашиглах болно: $ (“P [name = 'spoilbutton']”). Html (“Show text”);
Алхам 4
Хуудсан дээрх бүх товчлууруудыг олж, товчлуурын өмнө эхний түвшний гарчгийг шалгана уу. Үүнийг хийхийн тулд h1 хаягуудыг нэрээр нь хайх нөхцлийг бүрдүүлнэ үү. Тодорхойлогдсон гарчгийн текст нь div-д орно: $ (“p [name = 'spoilbutton']”). Тус бүр (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (энэ).prev (энэ).html () + "Текст харуулах"; $ (энэ).prev (энэ).replaceWith ("); $ (энэ).replaceWith (NewSpoilButton);}})
Алхам 5
Дараа нь та хулганы товчийг дарж дарах хэрэгтэй. Хэрэв товшилт илэрсэн бол түүнийг харуулах боломжтой: $ (“div [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css ("display")) =”Блок”) {
Алхам 6
Дараа нь өв бич. Div дотор текст p-д байгаа бөгөөд агуулгыг span tag-д байрлуулна: $ (this). Children ("p"). Children ("span"). Html ("Show text"); Collaps нээлттэй хорлон сүйтгэгч. Хэрэв нээлттэй биш бол текстээ өргөжүүлээрэй. Энэ алхам нь өв залгамжлалын дүрмийг үндэслэнэ: $ (this).next (this).slideUp ("хэвийн");} else {$ (this).children ("p"). Children ("span"). Html ($ (This).next (this).slideDown ("normal");} return return; })
Алхам 7
Дараа нь товчлуур дээрх хулганы товчлуурыг дарж бичээд скрипт нь хорлон сүйтгэгчийг нээж, задлах болно. $ (“P [name = 'spoilbutton']”). (Function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (энэ).slideUp ("хэвийн"); $ (энэ).html ("Нуугдах");} буцах худал;}); хорлон сүйтгэгч бэлэн болсон. Тохирох DIV блок олдсон үед гарч ирэх болно.
