раскрывающийся список с +-

razriv_shablona · May 26, 2010

Подскажите или дайте ссылку на ресурс.

Как создать вертикальный раскрывающийся список со знаком + слева от <ul>.

При нажатии на + или на <ul>, список раскрывается и знак + меняется на -.

Один уровень вложенности.

razriv_shablona · May 26, 2010

Это всего лишь javascript tree menu.

Спасибо за помощь!

Fogel · July 29, 2010

Здравствуйте.

HTML начал осваивать около недели - прочитал базовые сведения о нём и об CSS.

Попытался самостоятельно создать раскрывающийся список с кнопками. Синтаксис кода проверил на ошибки - отсутствуют, но при отображении не работает как надо, этого не могу понять.

При нажатии на строку Заголовок 1 (см. рисунок ниже) раскрывается список подзаголовков. Это правильно. Но по идее должна была меняться кнопка с плюса на минус. Однако по первому клику только раскрывается список. По следующему клику уже меняется плюс на минус, но раскрывшийся список остаётся неподвижным. При последующих кликах меняются только значки плюса-минуса, а список остаётся открытым.

Вот собственно сам мой код. В чём моя ошибка?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>  
  <head>  
	<meta http-equiv="content-type" content="text/html; charset=koi-8">  
	<meta name="generator" content="PSPad editor, www.pspad.com">  
	<title>
	</title>  
	<style type="text/css">   .ukaz{cursor:pointer;} #plus{display:inline;} #minus{display:none;}						 
	</style>
  </head>  
  <body>
	<table  BORDER=0>												
	  <tr><td>																	   
		  <table BORDER=0>																			 
			<tr><td>																									 
				<span class="ukaz" onclick=
				"if(document.getElementById('plus').style.display=='inline') document.getElementById('plus').style.display='none';else document.getElementById('plus').style.display='inline';
				if(document.getElementById('minus').style.display=='none') document.getElementById('minus').style.display='inline';else document.getElementById('minus').style.display='none';
				if(document.getElementById('tab1').style.display='none') document.getElementById('tab1').style.display='table-row';else document.getElementById('tab1').style.display='none';">																												 
				  <img id="plus" SRC="plus.png">																												 
				  <img id="minus" SRC="minus.png"> Заголовок 1																						
				</span>																									  
				<table class="ukaz" id="tab1" style="display:none;">																														 
				  <tr>																															 
					<td WIDTH=20></td><td>Подзаголовок 1</td>																												 
				  </tr>																												  
				  <tr>																															 
					<td WIDTH=20></td><td>Подзаголовок 2</td>																												 
				  </tr>																												  
				  <tr>																															 
					<td WIDTH=20></td><td>Подзаголовок 3</td>																												 
				  </tr>				
				</table>		  
		  </table>
	</table>	 
  </body>
</html>

Сам раскрывающийся список если убрать значки кнопок и условия для них срабатывания по onclick прекрасно работает,

то есть если оставить только такую строку:

<span class="ukaz" onclick="if(document.getElementById('tab1').style.display='none') document.getElementById('tab1').style.display='table-row';else document.getElementById('tab1').style.display='none';">Заголовок 1 </span>

Great Rash · July 29, 2010

Учите JavaScript без знания этого языка у вас ничего не получится.

Вот отличная статья на тему: http://javascript.ru/ui/tree

Fogel · July 29, 2010

Да, ещё тут нюанс - можно ли реализовать это только средствами html/css без javascript?

Great Rash, без точки с запятой перед else при проверке кода - выдаёт ошибку и в IE вообще никак не работает.

Спасибо за ссылку - почитаю.

Но неужели нельзя никак без javascript обойтись??

Great Rash · July 29, 2010

Great Rash, без точки с запятой перед else при проверке кода - выдаёт ошибку и в IE вообще никак не работает.

Знаю, это я по глупости написал.

Но неужели нельзя никак без javascript обойтись??

Никак

Fogel · July 30, 2010

Прочитал статью - очень доходчиво и понятно. Ну чтож, если без JS никак, буду разбираться с ним, чтобы сделать список в своём стиле..

Спасибо за помощь!

Sign In

раскрывающийся список с +-

Question

razriv_shablona

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

razriv_shablona

Link to comment

Share on other sites

Fogel

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Fogel

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Fogel

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information