X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Теги или скрипт?
kgalkin
kgalkin
Topic Starter сообщение 5.6.2009, 12:43; Ответить: kgalkin
Сообщение #1


Участник
***

Группа: User
Сообщений: 244
Регистрация: 21.12.2008
Из: Москва
Поблагодарили: 43 раза
Репутация:   10  


Всем привет.


Хочу сделать следующее:
к примеру....
1 список
2 список
3 список

Три названия списков..
нажимаешь на название, под ним раздвигается сам список, опят жмешь на название, список скрывается...

Таким образом на одной странице куча информации, но скрытой..

Как сделать?

Спасибо


--------------------
<a rel="nofollow" href="http://talk.maulnet.ru/url.php?to=http://exchengine.ru/?pid=301632666677" target="_blank">Лучший обмен валют!</a>



<a rel="nofollow" href="http://talk.maulnet.ru/url.php?to=http://icq.img.tj" target="_blank">[img]http://icq.img.tj/ub/2/3381524.jpg[/img]</a>
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dengol
dengol
сообщение 5.6.2009, 12:57; Ответить: dengol
Сообщение #2


Бывалый
****

Группа: User
Сообщений: 401
Регистрация: 18.3.2008
Из: Москва
Поблагодарили: 88 раз
Репутация:   23  


Для меню я так понимаю?
Вот пример, код можно вынести в отдельный js если нужно, дизайн тоже можно как угодно подогнать
CODE
<html><head>
<title> Многоуровневый раскрывающийся список DOM </title>
<style>
.colelem {position: relative; display: none;}
.expelem {position: relative; display: block;}
.exeexe {position: relative; width:300; background:gold; cursor:pointer; list-style-type: none;}
.exeexe2 {position: relative; display: block; cursor:pointer;}
</style>
<script>
var zakr='';
var zzakk='';
function A(Event) {
if (window.event) zzakk=event.srcElement;
else zzakk=Event.target;
zakr=zzakk.className;
if (zakr=="exelem") {
for (var i=0;i<zzakk.childNodes.length;i++) {
if (zzakk.childNodes[i].className) {
if (zzakk.childNodes[i].className=="colelem") {
if (zzakk.childNodes[i].childNodes.length!=1) zzakk.childNodes[i].style.color="red";
else zzakk.childNodes[i].style.color="black";
zzakk.childNodes[i].className="exelem";
}
else {
for (var i=0;i<zzakk.childNodes.length;i++) {
if (zzakk.childNodes[i].className) zzakk.childNodes[i].className="colelem";
}
}
}
}
}
else
if (zakr=="exeexe") {
for (var i=0;i<zzakk.childNodes.length;i++) {
if (zzakk.childNodes[i].className=="colelem") {
if (zzakk.childNodes[i].childNodes.length!=1) zzakk.childNodes[i].style.color="red";
zzakk.childNodes[i].className="exelem";
}
else {
if (zzakk.childNodes[i].className) {
zzakk.childNodes[i].style.color="black";
zzakk.childNodes[i].className="colelem";
}
}
}
}
}
</script>
</head>
<body onClick="A(event)">
<ul>

<ul class="exeexe" id="a1">1
<ul class="colelem" id="a2">1.1
<ul class="colelem" id="a3">1.1.1</ul>
<ul class="colelem" id="a4">1.1.2
<ul class="colelem" id="a5">1.1.2.1</ul>
<ul class="colelem" id="a6">1.1.2.2</ul>
</ul>
<ul class="colelem" id="a7">1.1.3</ul>
</ul>
<ul class="colelem" id="a8">1.2</ul>
<ul class="colelem" id="a9">1.3</ul>
<ul class="colelem" id="a10">1.4
<ul class="colelem" id="a11">1.4.1</ul>
<ul class="colelem" id="a12">1.4.2</ul>
</ul></ul>

<ul class="exeexe" id="a13">2
<ul class="colelem" id="a14">2.1
<ul class="colelem" id="a15">2.1.1</ul>
<ul class="colelem" id="a16">2.1.2</ul>
</ul>
</ul>

<ul class="exeexe" id="a13">3
<ul class="colelem" id="a14">3.1
<ul class="colelem" id="a15">3.1.1
<ul class="colelem" id="a16"><a href="1.htm">3.1.1.1</a></ul>
</ul></ul>
<ul class="colelem" id="a14"><a href="2.htm">3.1.2</a>
</ul>
</ul>

</ul>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
GreyGhost
GreyGhost
сообщение 5.6.2009, 12:57; Ответить: GreyGhost
Сообщение #3


Завсегдатай
*****


Группа: Active User
Сообщений: 661
Регистрация: 17.3.2009
Поблагодарили: 112 раз
Репутация:   5  


js
как и выпадающее меню, только событие на клик сменить
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kgalkin
kgalkin
Topic Starter сообщение 5.6.2009, 13:02; Ответить: kgalkin
Сообщение #4


Участник
***

Группа: User
Сообщений: 244
Регистрация: 21.12.2008
Из: Москва
Поблагодарили: 43 раза
Репутация:   10  


Не совсем правильно выразился...
не для меню...

Вот афиша театра на два месяца. Хочу так же добавить чисто репертуар актера..
Все в одном листе -куча информации, которую не очень удобно читать.
Потому хочу сделать типа оглавления
Афиша - июнь
Афиша - июль
и т.д..

Жмешь на нужный месяц - страница растягивается и появляется непосредственно афиша на месяц...и убирается так же..

Сообщение отредактировал kgalkin - 5.6.2009, 13:03


--------------------
<a rel="nofollow" href="http://talk.maulnet.ru/url.php?to=http://exchengine.ru/?pid=301632666677" target="_blank">Лучший обмен валют!</a>



<a rel="nofollow" href="http://talk.maulnet.ru/url.php?to=http://icq.img.tj" target="_blank">[img]http://icq.img.tj/ub/2/3381524.jpg[/img]</a>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dengol
dengol
сообщение 5.6.2009, 13:22; Ответить: dengol
Сообщение #5


Бывалый
****

Группа: User
Сообщений: 401
Регистрация: 18.3.2008
Из: Москва
Поблагодарили: 88 раз
Репутация:   23  


Мммм наверное вариант типа спойлера должен подойти......
CODE
<div style='width: 99%; border: 1px dashed #005588; border-left: 4px solid #0074ee;'>
<script language='javascript' type='text/javascript'>
<!--
if(!_s_id)
{
var _s_id = 0;
var sp_title = "";
function switch_spoiler(id, title)
{
if(document.getElementById("sp_d_" + id).style.display == "block")
{
document.getElementById("sp_a_" + id).innerHTML = "*" + title;
document.getElementById("sp_d_" + id).style.display = "none";
}
else
{
document.getElementById("sp_a_" + id).innerHTML = "^ " + title;
document.getElementById("sp_d_" + id).style.display = "block";
}
}
}
_s_id++;

document.write("<div id='sp_a_" + _s_id + "' onclick='switch_spoiler(" + _s_id + ", \"Заголовок когда раскрыто\");' style='vertical-align: middle; height: 30px; line-height: 30px; padding-left:10px; background-color: #e7eef7; font-size: 12px; font-weight: bold; color: #0064e5; cursor: hand;'>Заголовок</div><div id='sp_d_" + _s_id + "' style='display: none; min-height: 25px; background-color: white; padding-left:10px; padding-top:5px; padding-bottom:5px;'>");
-->
</script>
текст</div></div>


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kgalkin
kgalkin
Topic Starter сообщение 5.6.2009, 13:33; Ответить: kgalkin
Сообщение #6


Участник
***

Группа: User
Сообщений: 244
Регистрация: 21.12.2008
Из: Москва
Поблагодарили: 43 раза
Репутация:   10  


(dengol @ 5.6.2009, 13:22) *
Мммм наверное вариант типа спойлера должен подойти......

Аха, отлично...
Сейчас до ума доведу...а то цвет не очень ))

Спасибо!


--------------------
<a rel="nofollow" href="http://talk.maulnet.ru/url.php?to=http://exchengine.ru/?pid=301632666677" target="_blank">Лучший обмен валют!</a>



<a rel="nofollow" href="http://talk.maulnet.ru/url.php?to=http://icq.img.tj" target="_blank">[img]http://icq.img.tj/ub/2/3381524.jpg[/img]</a>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Горячая тема (нет новых ответов) Что лучше, фриланс, удаленка, или работа в офисе солидной компании?
95 Levizar 7735 12.12.2017, 21:57
автор: Зотов
Открытая тема (нет новых ответов) Домен .рф или .ru?
Есть ли сейчас разница для поисковых систем?
11 SuperPill 1529 11.12.2017, 18:14
автор: RICHHost
Горячая тема (нет новых ответов) Главная страница сайта.Больше текста или фото?
98 PROK777 16600 11.12.2017, 15:57
автор: vsemmoney
Горячая тема (нет новых ответов) Выполню качественную верстку макетов или разработка собственного, быстро и не дорого
от 45$
73 webche 29586 8.12.2017, 20:51
автор: RedByte
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыНарисую дизайн лендинга или сайта-визитки за 1000р
72 Alex_100 13466 7.12.2017, 13:38
автор: Realkent


 



RSS Текстовая версия Сейчас: 14.12.2017, 11:06
Дизайн