помогите! меню на jave.. - Веб-программирование

3bepek · 19.02.2007, 13:33

Есть вот такой код:

Код:

<DIV class="close" onClick="this.className='open';" onDblClick="this.className = 'close';">
<span class="menu_main">Раздел</span><br>
<a class="menu" href="#">1й пункт</a><br>
<a class="menu" href="#">2й пункт</a><br>
<a class="menu" href="#">3й пункт</a>
</DIV>

Стиль такой:

Код:

.close   {width: 130px; height: 14px; overflow: hidden;}
.open    {width: 130px; height: auto; overflow: visible;}

Т.е. мы имеем линк "Раздел", при нажатии на который открывается список пунктов. При двойном нажатии - исчезает.

Вопрос: Как сделать так, чтоб при повторном нажатии он исчезал (вместо двойного)

Заранее спасибо.

RaZEr · 19.02.2007, 13:40

this.className = (this.className == 'open')?'close':'open'

3bepek · 19.02.2007, 14:13

все гениальное просто!!
Спасибо большое!!!!

добавлено через 19 минут
ой... тут такое дело....
а при нажатии на какой-нибудь "пункт меню" - раздел сворачивается..
нельзя как-нибудь сделать так, чтоб он сворачивался/разворачивался только при нажатии на "раздел"

и еще, если таких разделов несколько то как реализовать, чтоб при развернутом 1м разделе мы нажимаем на раздел 2 - и 2й раздел разворачивается, а первый сворачивается..

я в java скрипте не силен... так что сильно не пинайте.. ))
заранее спасибо!

19.02.2007, 15:37

<html>
<style type="text/css">
.list {width: 130px; height: 14px;}
.close {width: 130px; height: 1px; overflow: hidden;}
.open {width: 130px; height: auto; overflow: visible;}
</style>

<script language="JavaScript">
function ListOnClick()
{
var d = document.getElementById("List01");
d.className = (d.className == 'open')?'close':'open';
}
</script>

<body>

<DIV class="list" onClick="ListOnClick()">
<span class="menu_main">Раздел</span><br>
</DIV>
<DIV id="List01" class="close">
<a class="menu" href="#">1й пункт</a><br>
<a class="menu" href="#">2й пункт</a><br>
<a class="menu" href="#">3й пункт</a>
</DIV>
</body>
</html>

3bepek · 19.02.2007, 16:20

Спасибо!
А мне теперь для каждого раздела придется свою функцию прописать?
И как при разворачивании одного раздела заставить остальные свернуться?

19.02.2007, 17:11

Цитата:

Сообщение от 3bepek

Спасибо!
А мне теперь для каждого раздела придется свою функцию прописать?
И как при разворачивании одного раздела заставить остальные свернуться?

<html>
<style type="text/css">
.list {width: 130px; height: 14px;}
.close {width: 130px; height: 1px; overflow: hidden;}
.open {width: 130px; height: auto; overflow: visible;}
</style>

<script language="JavaScript">
var Lists = new Array;
Lists[0] = "List01";
Lists[1] = "List02";
Lists[2] = "List03";
function ListOnClick(ListID)
{
var d = document.getElementById(ListID);
d.className = (d.className == "open")?"close":"open";
for(i = 0; i < Lists.length; i++){
d1 = document.getElementById(Lists[i]);
if(d1.id != d.id) d1.className = "close";

}
}
</script>

<body>

<DIV class="list" onClick="ListOnClick('List01')">
<span class="menu_main">Раздел 1</span><br>
</DIV>
<DIV id="List01" class="close">
<a class="menu" href="#">1й пункт раздела 1</a><br>
<a class="menu" href="#">2й пункт раздела 1</a><br>
<a class="menu" href="#">3й пункт раздела 1</a>
</DIV>

<DIV class="list" onClick="ListOnClick('List02')">
<span class="menu_main">Раздел 2</span><br>
</DIV>
<DIV id="List02" class="close">
<a class="menu" href="#">1й пункт раздела 2</a><br>
<a class="menu" href="#">2й пункт раздела 2</a><br>
<a class="menu" href="#">3й пункт раздела 2</a>
</DIV>

<DIV class="list" onClick="ListOnClick('List03')">
<span class="menu_main">Раздел 3</span><br>
</DIV>
<DIV id="List03" class="close">
<a class="menu" href="#">1й пункт раздела 3</a><br>
<a class="menu" href="#">2й пункт раздела 3</a><br>
<a class="menu" href="#">3й пункт раздела 3</a>
</DIV>
</body>
</html>

3bepek · 19.02.2007, 17:21

Огромное спасибо!
Вот это то что надо!!

добавлено через 3 минуты
прочитал код - все понятно...
эх, надо javascript учить...

19.02.2007, 17:31

Учи лучше С++. Потом ни с Java ни с PHP проблем не будет.

RaZEr · 19.02.2007, 18:53

Между C++, Java и PHP огромная пропасть. Учить лучше то, на чём потом придётся писать. Куча мнений по этому поводу есть здесь: http://www.imho.ws/showthread.php?t=37035

19.02.2007, 19:33

А я и не говорю что это одно и тоже. Просто если владеешь C++ выучить Java или PHP будет значительно проще.

RaZEr · 19.02.2007, 19:38

Причем здесь си? Просто потому что он тебе нравится?...

19.02.2007, 19:53

Я имел в виду схожесть синтаксисов всех трех языков. И более ни чего.

h0ttab · 01.09.2007, 16:43

А как сделать так чтоб выпадала в табличном дизайне

Код HTML:

<table>
<DIV class="list" onClick="ListOnClick()">
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_3.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><b><a class="links" href="/live/">Життя</a></b></td>
</tr>
</DIV>
<DIV id="List01" class="close">

<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_3.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><b><a class="links" href="/live/">Життя</a></b></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/society/" class="links">Суспільство</a></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/security/" class="links">Безпека</a></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/education/" class="links">Освіта</a></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/interview/" class="links">Інтерв’ю</a></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/livenews/" class="links">Життя</a></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/two/" class="links">Двоє</a></td>
</tr>
<tr>
<td class="links" colspan="2" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/animals/" class="links">Тварини</a></td>
</tr>

</DIV>
</table>

Он отображает полную таблицу а хотелось-бы чтоб прятал как с бр..

помогите новчику

Hubbitus · 09.09.2007, 07:41

h0ttab, да где же Вы читали про HTML, чтобы у таблицы были внутри div-элементы???

Ну а в остальном также сделать как и в примере выше.

Код HTML:

<html>
<style type="text/css">
.list	{width: 130px; height: 14px;}
.close	{width: 130px; height: 1px; overflow: hidden;}
.open	{width: 130px; height: auto; overflow: visible;}
</style>

<script language="JavaScript">
var Lists = new Array;
Lists[0] = "List01";
function ListOnClick(ListID){
var d = document.getElementById(ListID);
d.className = (d.className == "open")?"close":"open";
	for(i = 0; i < Lists.length; i++){
	d1 = document.getElementById(Lists[i]);
		if(d1.id != d.id) d1.className = "close";
	}
}
</script>

<body>

<table>
<thead class="list" onClick="ListOnClick('List01')">
	<tr>
	<td class="links" background="/templates/vechorka/images/bgs_3.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><b><a class="links" href="#">Життя</a></b></td>
	</tr>
</thead>

<tbody id="List01" class="close">
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_3.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><b><a class="links" href="/live/">Життя</a></b></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/society/" class="links">Суспільство</a></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/security/" class="links">Безпека</a></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/education/" class="links">Освіта</a></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/interview/" class="links">Інтерв’ю</a></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/livenews/" class="links">Життя</a></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/two/" class="links">Двоє</a></td>
	</tr>
	<tr>
		<td class="links" background="/templates/vechorka/images/bgs_5.gif" height="20"><img src="/templates/vechorka/images/arr_4.gif" style="margin-left: 7px; margin-right: 21px;" alt="" height="5" width="5"><a href="/live/animals/" class="links">Тварини</a></td>
	</tr>
</tbody>
</table>

</body>
</html>

shuron · 10.09.2007, 07:28

P.S. javaScript!!! a ne java...

19.02.2007, 13:33	# 1
3bepek Newbie Регистрация: 24.11.2006 Адрес: Москва, Пресня Пол: Male Сообщения: 26	помогите! меню на jave.. Есть вот такой код: Код: <DIV class="close" onClick="this.className='open';" onDblClick="this.className = 'close';"> <span class="menu_main">Раздел</span><br> <a class="menu" href="#">1й пункт</a><br> <a class="menu" href="#">2й пункт</a><br> <a class="menu" href="#">3й пункт</a> </DIV> Стиль такой: Код: .close {width: 130px; height: 14px; overflow: hidden;} .open {width: 130px; height: auto; overflow: visible;} Т.е. мы имеем линк "Раздел", при нажатии на который открывается список пунктов. При двойном нажатии - исчезает. Вопрос: Как сделать так, чтоб при повторном нажатии он исчезал (вместо двойного) Заранее спасибо.

19.02.2007, 13:40	# 2
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	this.className = (this.className == 'open')?'close':'open'

19.02.2007, 14:13	# 3
3bepek Newbie Регистрация: 24.11.2006 Адрес: Москва, Пресня Пол: Male Сообщения: 26	все гениальное просто!! Спасибо большое!!!! добавлено через 19 минут ой... тут такое дело.... а при нажатии на какой-нибудь "пункт меню" - раздел сворачивается.. нельзя как-нибудь сделать так, чтоб он сворачивался/разворачивался только при нажатии на "раздел" и еще, если таких разделов несколько то как реализовать, чтоб при развернутом 1м разделе мы нажимаем на раздел 2 - и 2й раздел разворачивается, а первый сворачивается.. я в java скрипте не силен... так что сильно не пинайте.. )) заранее спасибо!

19.02.2007, 15:37	# 4
Павел Guest Сообщения: n/a	<html> <style type="text/css"> .list {width: 130px; height: 14px;} .close {width: 130px; height: 1px; overflow: hidden;} .open {width: 130px; height: auto; overflow: visible;} </style> <script language="JavaScript"> function ListOnClick() { var d = document.getElementById("List01"); d.className = (d.className == 'open')?'close':'open'; } </script> <body> <DIV class="list" onClick="ListOnClick()"> <span class="menu_main">Раздел</span><br> </DIV> <DIV id="List01" class="close"> <a class="menu" href="#">1й пункт</a><br> <a class="menu" href="#">2й пункт</a><br> <a class="menu" href="#">3й пункт</a> </DIV> </body> </html>

19.02.2007, 16:20	# 5
3bepek Newbie Регистрация: 24.11.2006 Адрес: Москва, Пресня Пол: Male Сообщения: 26	Спасибо! А мне теперь для каждого раздела придется свою функцию прописать? И как при разворачивании одного раздела заставить остальные свернуться?

19.02.2007, 17:21	# 7
3bepek Newbie Регистрация: 24.11.2006 Адрес: Москва, Пресня Пол: Male Сообщения: 26	Огромное спасибо! Вот это то что надо!! добавлено через 3 минуты прочитал код - все понятно... эх, надо javascript учить...

19.02.2007, 17:31	# 8
Павел Guest Сообщения: n/a	Учи лучше С++. Потом ни с Java ни с PHP проблем не будет.

19.02.2007, 18:53	# 9
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	Между C++, Java и PHP огромная пропасть. Учить лучше то, на чём потом придётся писать. Куча мнений по этому поводу есть здесь: http://www.imho.ws/showthread.php?t=37035

19.02.2007, 19:33	# 10
Павел Guest Сообщения: n/a	А я и не говорю что это одно и тоже. Просто если владеешь C++ выучить Java или PHP будет значительно проще.

19.02.2007, 19:38	# 11
RaZEr МОД-Оператор ЭВМ Регистрация: 18.04.2002 Адрес: Питер Сообщения: 4 343	Причем здесь си? Просто потому что он тебе нравится?...

19.02.2007, 19:53	# 12
Павел Guest Сообщения: n/a	Я имел в виду схожесть синтаксисов всех трех языков. И более ни чего.

10.09.2007, 07:28	# 15
shuron Full Member Регистрация: 16.09.2003 Сообщения: 793	P.S. javaScript!!! a ne java...