Форум: "Прочее";
Текущий архив: 2009.08.16;
Скачать: [xml.tar.bz2];
Вниз
HTML, разворачивание элемента Найти похожие ветки
← →
Пит (2009-06-15 16:11) [0]Может быть такая фишка на HTML-странице, по-умолчанию, виден только некий заголовок, например:
[Скриншоты]
Кликаешь на этот заголовок и раскрывается под ним элемент с самими скриншотами. Кликаешь опять - схлопывается.
Я знаю один вариант так делать. Заголовок - статичный элемент, а описание есть элемент со стилем display = "none". По клике по заголовку стиль делается "block", еще раз кликнешь - опять "none", таким образом и достигается функционал раскрытия / закрытия.
Структура выглядит так:<div id="header">[Скриншоты]</div>
<div id="desc" style="display: none;">Описание</div>
Проблема в том, что я не могу использовать заданные жесткие ID. Я мог бы написать аля:
if document.all.desc.style.display == "none" { document.all.desc.style.display = "block" }
else { document.all.desc.style.display = "none" }
Но не могу работать через ID "desc", так как я не знаю сколько раз этот кусок кода будет интегрирован в страницу (а может быть более одного). То есть, код сам по себе должен быть так сказать самодостаточным и "не пересекаться" при его размножении по тексту страницы. В данном конкретном примере пересекаются ID, так как этот параметр должен быть уникальным для всех элементов на странице.
Можно использовать параметр this, но сложность в том, что клик происходит по заголовку, а изменять свойства нужно у описания. То есть типа такого:
<div id="header" onclick="ChangeVisible(this)">[Скриншоты]</div>
не прокатит, ибо передастся this элемента заголовок. А как передать в относительном виде элемент описания?
Надеюсь, разъяснил... как смог (( Если непонятно - уточняйте плиз
← →
Холивар (2009-06-15 16:39) [1]
> Пит (15.06.09 16:11)
Так генерируй уникальные ID для каждого элемента
← →
palva © (2009-06-15 16:49) [2]Вот так можно
<script>
function f(e) {
c=e.childNodes[1];
if(c.style.display=="block") c.style.display="none";
else c.style.display="block";
}
</script>
<div onclick="f(this)">[Скриншоты]
<div style="display: block;">Описание</div></div>
← →
palva © (2009-06-15 17:07) [3]Вообще, не все так просто. Придется усложнить.
function f(e) {
c=e.childNodes[1];
if(c.style.display=="block") c.style.display="none";
else c.style.display="block";
}
function b(e) {
if (window.event) window.event.cancelBubble = true;
else e.stopPropagation();
}
</script>
<div onclick="f(this)">[Скриншоты]
<div style="display: block;" onclick="b(event)">Описание</div></div>
← →
palva © (2009-06-15 17:31) [4]Еще один вариант.
function f(e) {
c=e.nextSibling;
if(c.style.display=="block") c.style.display="none";
else c.style.display="block";
}
</script>
<div onclick="f(this)">[Скриншоты]</div><div style="display: block;">Описание</div>
Но тут надо следить, чтобы между двумя дивами не было пробелов и переводов строк. Иначе в Firefox NextSibling выскакивает на эти пробельные символы.
← →
Cobalt © (2009-06-15 17:47) [5]попробуй посмотреть, как сделано на torrents.ru - там как раз такая фишка.
P.S. исходники рулят ;-)
← →
М. Береговой (2009-06-16 21:53) [6]Может проще так сделать?:
<div>
<div onclick="f(this)">[Скриншоты]
<div style="display: block; position:absolute;" onclick="b(event)">Описание</div></div>
</div>
<script>
function f(el) {
if(el.parentNode.childNodes[1].style.display=="block") el.parentNode.childNodes[1].style.display="none";
else el.parentNode.childNodes[1].style.display="block";
}
</script>
position:absolute; - нужен, чтоб нижние элементы не сдвигались на странице..
← →
М. Береговой (2009-06-16 21:55) [7]Поторопился... вот так:
Может проще так сделать?:<div>
<div onclick="f(this)">[Скриншоты]</div>
<div style="display: block; position:absolute;" >Описание</div>
</div>
<script>
function f(el) {
if(el.parentNode.childNodes[1].style.display=="block") el.parentNode.childNodes[1].style.display="none";
else el.parentNode.childNodes[1].style.display="block";
}
</script>
position:absolute; - нужен, чтоб нижние элементы не сдвигались на странице..
← →
antonn © (2009-06-16 22:15) [8]когда то делал для IPB:
<div style=" BACKGROUND-COLOR: #FAFAFC; BORDER-RIGHT: #A7A7A7 1px solid; BORDER-TOP: #A7A7A7 1px solid; BORDER-BOTTOM: #A7A7A7 1px solid; BORDER-LEFT: #A7A7A7 1px solid;">
<span><div style="cursor:hand; c\ursor:pointer; FONT-SIZE: 11px; BACKGROUND-COLOR: #E9E9E9; COLOR: #101010; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; MARGIN: 1px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px;" onclick="obj=this.parentNode.childNodes[1].style; tmp=(obj.display!="block") ? "block" : "none"; obj.display=tmp;return false;"> Свернутый текст (щелкните, чтобы прочесть)</div><div style="FONT-SIZE: 13px; COLOR: #101010; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; PADDING-LEFT: 4px; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; PADDING-RIGHT: 4px; display:none;">
{content}
</div></span></div>
← →
Пит (2009-06-17 16:38) [9]спасибо за помощь
← →
partizan (2009-06-17 22:50) [10]Страница генерируется на php, или ручками html делается?
Если ручками - в чем проблема разные id сделать?
Если php (или любой другой язык) - random
← →
antonn © (2009-06-17 23:04) [11]
> partizan (17.06.09 22:50) [10]
или посмотреть [8], поддержка вложенности как бонус
Страницы: 1 вся ветка
Форум: "Прочее";
Текущий архив: 2009.08.16;
Скачать: [xml.tar.bz2];
Память: 0.48 MB
Время: 0.008 c
