Открывающийся блок перекрывает нижележащие
Есть два дива, допустим A и B, диву В в стилях прописано display:none. И ниже их кнопка типа "развернуть-свернуть". При нажатии на кнопку запоминается высота дива B, затем высота задается 0px, затем display:block и высота дива плавно увеличивается до значения, которое было запомнено ранее. В результате получается что-то типа выползающей панели. Все замечательно, только, выползая див В не смещает нижележащее содержимое ниже, а наползает на него, сломал голову... Что я делаю не так?
|
Larne, похоже, либо position (absolute имеет полное право наползать на static, к примеру), либо z-index у дива В и "нижеследующего" (кнопки?) разные.
|
Z-index принудительно поставил одинаковый каждому диву. position нигде в стилях не прописывался, то есть дивы просто идут один за другим, но потом я ставил разные position в порядке эксперимента, ничего не изменилось...
|
Тогда, пожалуй, в код смотреть надо...
|
функции slideDown и slideUp разворачивают и сворачивают div с классом "hide" при нажатии на href с классом "details". Сам toggle не вынесен в отдельную функцию, а идет прямо после domReady. Коряво, но уж как есть пока. Не уверен поможет ли код, так как согласно нему все работает отлично, кроме наползания на нижележащий текст, а тут дело видимо в CSS (стили для классов "begin", "hide", "details" вобще не прописывались, кроме .hide {display:none}, потом принудительно прописывались одинаковые z-index и были всякие эксперименты с position) или дело может быть в дочерних тегах дива hide (не уверен как они могут повлиять на стиль родителя), тогда смотреть надо HTML.
function slideDown(elem){ var pos=0, q, tim; var h = parseInt(fullHeight(elem)); //var next=next; elem.style.height="0px"; show(elem); tim=setInterval(function(){ pos+=5; if (pos>=100){ clearInterval(tim); } elem.style.height=((pos/100)*h)+"px"; }, 1); } function slideUp(elem){ var pos=0, tim; var h = parseInt(fullHeight(elem)); tim=setInterval(function(){ pos+=10; if (pos>100){ clearInterval(tim); hide(elem); elem.style.height=h+"px"; } elem.style.height=(h-(pos/100)*h)+"px"; }, 20); } domReady(function(){ var begin= hasClass("begin"); var more=hasClass("hide"); var href = hasClass("details"); for (var j=0; j<href.length; j++){(function(){ var s=j; var hrefText=href[0].innerHTML; addEvent ( href[s], "click", function() { var op = attr(more[s], "open"); if (op=="yes"){ slideUp(more[s]); attr (more[s], "open", ""); href[s].innerHTML=hrefText; href[s].className="more"; } if(op==""){ slideDown(more[s]); attr (more[s], "open", "yes"); if (language=="russian"){ href[s].innerHTML="свернуть"; href[s].className="more_back"; } else {href[s].innerHTML="minimize";} href[s].className="more_back"; } return false; }); })(); } }) |
прошу прощения что выложил код таким образом. уверен на форуме есть способ выложить код корректно со всеми отступами, но я на форуме новичок... будем учиться
|
у меня сдвигает...
"ниже" лежит тэг <p>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> div.a, div.b{ height:100px; border: 1px solid gray; text-align: center; } div.b{display:none;} div.b.Expanding{display: block} </style> <script type="text/javascript"> var b_h = 100 function show_b(){ var b = document.getElementById("divb") if(b.className.search("Expanding") < 0){ b.style.height = 0 b.className += " Expanding" }else{ var h = parseInt(b.style.height) if(h >= b_h) return b.style.height = h + 10 + "px" } setTimeout(show_b, 100) } </script> </head> <body> <div class="a" onclick="show_b()"><p>div class="a"</p><p>Извольте кликнуть здесь...</p></div> <div class="b" id ="divb"><p>div class="b"</p></div> <p>just next paragraph</p> </body> </html> а ссылку на статью о форматировании я и сам как-то не нашёл :-0 |
да в диве находится <p>, в этом дело? И если да то как с этим бороться
|
теперь в дивах ничего нет
но кликать в рамку надо всё равно
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style type="text/css"> div.a, div.b{ height:100px; border: 1px solid gray; text-align: center; } div.b{display:none;} div.b.Expanding{display: block} </style> <script type="text/javascript"> var b_h = 100 function show_b(){ var b = document.getElementById("divb") if(b.className.search("Expanding") < 0){ b.style.height = 0 b.className += " Expanding" }else{ var h = parseInt(b.style.height) if(h >= b_h) return b.style.height = h + 10 + "px" } setTimeout(show_b, 100) } </script> </head> <body> <div class="a" onclick="show_b()"></div> <div class="b" id ="divb"></div> <p>just next paragraph</p> </body> </html> Думаю, дело в размерах |
Цитата:
|
Часовой пояс GMT +3, время: 17:21. |