Autor | Zpráva | ||
---|---|---|---|
Wayne Profil * |
#1 · Zasláno: 13. 6. 2015, 23:39:19
Ahoj, mohl by mi někdo poradit jak udělat, aby když mám u nějakého článku uvedeno Zobrazit celý text pomocí, kterého se mi rozkryje celý obsah článku, aby poté to slovo zobrazit celý text zmizelo a text se umístil hned za skončeným textem článku? Zatím mám toto
var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || setTimeout; var nextElementSibling = function(el) { do { el = el.nextSibling; } while (el && el.nodeType !== 1); return el; }; var show = function(content) { content.style.display = "block"; content.style.height = ""; var height = content.offsetHeight; content.style.height = 0; content.offsetHeight; // layout trigger raf(function() { content.style.height = height + "px"; }); content.setAttribute("data-open", "1"); }; var hide = function(content) { content.style.height = 0; content.removeAttribute("data-open"); }; var toggle = function() { var content = nextElementSibling(this); if (content.getAttribute("data-open")) { hide(content); } else { show(content); } }; var headers = document.querySelectorAll(".toggle-header"); for (var i = 0; i < headers.length; i++) { headers[i].onclick = toggle; } To znamená, že po kliknutí na slovo "Zobrazit celý text" se mi rozkryje celý obsah, ale slovo zobrazit celý text mi tam zůstane. Byl bych vám moc vděčný za radu, která vyřeší můj problém |
||
Keeehi Profil |
#2 · Zasláno: 13. 6. 2015, 23:42:37
A struktura HTML ke kterému to patří vypadá jak?
|
||
Wayne Profil * |
#3 · Zasláno: 13. 6. 2015, 23:45:51
<div class="toggle"> <div class="toggle-header"> <strong>Zobrazit celý text</strong> </div> <div class="toggle-content"> <p>Zobrazení celého textu</p> </div> </div> |
||
Keeehi Profil |
#4 · Zasláno: 14. 6. 2015, 00:02:19
Je vám ale jasné že když ten text zmizí že už na něj nepůjde znovu kliknout a tedy už to nepůjde zavřít. Tedy místo toggle by bylo lepší vymyslet jiné pojmenování, třeba showMore.
var toggle = function() { this.style.display = 'none'; show(nextElementSibling(this)); }; |
||
Wayne Profil * |
#5 · Zasláno: 14. 6. 2015, 00:05:08
to máte pravdu, že by bylo asi ideálnější na konec rozkrytého obsahu vložit Skrýt text
|
||
Keeehi Profil |
Pak bych to viděl na
<el obal> <el perex> <el content> <el readMore> Ale tedy osobně v tom skrývání nevidím moc užitku. Když už to jako uživatel budu mít přečtené, proč bych to měl skrývat když mužů rovnou pokračovat na další článek. Navíc když to skryjí, tak se mi nejspíše stránka odroluje někam kam to úplně nechci a budu to muset dohledávat. |
||
Wayne Profil * |
#7 · Zasláno: 14. 6. 2015, 00:33:59
Mohl byste mi ještě poradit s tím JS kódem na to skrytí? Zatím mi to nereaguje
|
||
Keeehi Profil |
#8 · Zasláno: 14. 6. 2015, 02:39:30
Klasické skrývání bez animace takto.
|
||
Wayne Profil * |
#9 · Zasláno: 14. 6. 2015, 11:01:20
Super, dík moc!!!
|
||
Časová prodleva: 9 let
|
0