Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Rozwijane menu
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
rubesom
10.01.2013, 23:05:06
Cześć

Mam problem z rozwijanym menu. Po wklejeniu wszystkich kodów menu nie działa, nic się nie dzieje - menu po włączeniu strony jest rozwinięte.

[HTML] pobierz, plaintext 
  1. /**
  2.  * @author Sławomir Kokłowski {@link <a href="http://www.kurshtml.edu.pl}" target="_blank">http://www.kurshtml.edu.pl}</a>
  3.  * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!)
  4.  */
  5.  
  6. function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj)
  7. {
  8. 	if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25;
  9. 	if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25;
  10. 	if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250;
  11. 	if (typeof czasZamknij == 'undefined' || czasZamknij < 0) czasZamknij = 500;
  12.  
  13. 	var url = unescape(window.location.href.replace(/#.*/, ''));
  14. 	var base = window.location.protocol + '//' + window.location.host + window.location.pathname.replace(/[^\/\\]+$/, '');
  15.  
  16. 	if (style)
  17. 	{
  18. 		if (style.indexOf(':') < 0)
  19. 		{
  20. 			document.getElementById(id).className += ' ' + style;
  21. 		}
  22. 		else
  23. 		{
  24. 			style = style.replace(/(^\s+|(\s|;)+$)/g, '').split(/\s*;\s*/);
  25. 			for (var i = 0; i < style.length; i++)
  26. 			{
  27. 				style[i] = style[i].split(/\s*:\s*/);
  28. 				for (var j = 0, c, property = ''; j < style[i][0].length; j++)
  29. 				{
  30. 					c = style[i][0].charAt(j);
  31. 					property += c == '-' ? style[i][0].charAt(++j).toUpperCase() : c.toLowerCase();
  32. 				}
  33. 				eval('document.getElementById("' + id + '").style.' + property + ' = "' + style[i][1].replace(/"/g, '\\"') + '"');
  34. 			}
  35. 		}
  36. 	}
  37. 	
  38. 	for (var i = 0; i < document.getElementById(id).getElementsByTagName('dt').length; i++)
  39. 	{
  40. 		var dd = new Array();
  41. 		var el = document.getElementById(id).getElementsByTagName('dt')[i].nextSibling;
  42. 		var nodeName;
  43. 		while (el && (nodeName = el.nodeName.toLowerCase()) != 'dt')
  44. 		{
  45. 			if (nodeName == 'dd')
  46. 			{
  47. 				el._dt = document.getElementById(id).getElementsByTagName('dt')[i];
  48. 				if (otworz)
  49. 				{
  50. 					el.onmouseover = function()
  51. 					{
  52. 						clearTimeout(this._dt._timoutID);
  53. 						this._dt._displayed = false;
  54. 						this._dt.onclick();
  55. 					}
  56. 					el.onmouseout = function()
  57. 					{
  58. 						clearTimeout(this._dt._timoutID);
  59. 						var dt = this._dt;
  60. 						this._dt._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  61. 					};
  62. 				}
  63. 				dd[dd.length] = el;
  64. 			}
  65. 			el = el.nextSibling;
  66. 		}
  67. 		document.getElementById(id).getElementsByTagName('dt')[i]._dd = dd;
  68. 		document.getElementById(id).getElementsByTagName('dt')[i]._timoutID = null;
  69. 		document.getElementById(id).getElementsByTagName('dt')[i]._displayed = false;
  70. 		document.getElementById(id).getElementsByTagName('dt')[i].onclick = function()
  71. 		{
  72. 			clearTimeout(this._timoutID);
  73. 			if (!this._displayed)
  74. 			{
  75. 				var el = this.parentNode.getElementsByTagName('dt')[0];
  76. 				while (el)
  77. 				{
  78. 					if (el.nodeName.toLowerCase() == 'dt' && el != this)
  79. 					{
  80. 						el._displayed = false;
  81. 						if (czasZwin) display(el, 0);
  82. 						else display(el);
  83. 					}
  84. 					el = el.nextSibling;
  85. 				}
  86. 			}
  87. 			this._displayed = !this._displayed;
  88. 			if (this._displayed && czasRozwin || !this._displayed && czasZwin) display(this, 0);
  89. 			else display(this);
  90. 		};
  91. 		if (otworz)
  92. 		{
  93. 			document.getElementById(id).getElementsByTagName('dt')[i].onmouseover = function()
  94. 			{
  95. 				clearTimeout(this._timoutID);
  96. 				var dt = this;
  97. 				this._timoutID = setTimeout(function () { dt._displayed = false; dt.onclick(); }, czasOtworz);
  98. 			};
  99. 			document.getElementById(id).getElementsByTagName('dt')[i].onmouseout = function()
  100. 			{
  101. 				clearTimeout(this._timoutID);
  102. 				var dt = this;
  103. 				this._timoutID = setTimeout(function () { dt._displayed = true; dt.onclick(); }, czasZamknij);
  104. 			};
  105. 		}
  106. 	}
  107. 	
  108. 	start(document.getElementById(id).getElementsByTagName('dt')[0]);
  109. 	
  110. 	function start(dt)
  111. 	{
  112. 		var hide = true;
  113. 		var el = dt;
  114. 		while (el)
  115. 		{
  116. 			var nodeName = el.nodeName.toLowerCase();
  117. 			if (nodeName == 'dt')
  118. 			{
  119. 				dt = el;
  120. 				hide = true;
  121. 			}
  122. 			if (nodeName == 'dt' || nodeName == 'dd')
  123. 			{
  124. 				if (!nieInicjalizuj && el.getElementsByTagName('a').length)
  125. 				{
  126. 					var active = el.getElementsByTagName('a')[0].href && unescape(el.getElementsByTagName('a')[0].href.replace(/#.*/, '')) == url;
  127. 					if (!active)
  128. 					{
  129. 						var rel = el.getElementsByTagName('a')[0].getAttribute('rel');
  130. 						if (rel)
  131. 						{
  132. 							var matches = (' ' + rel + ' ').match(/\s+Collection\(([^)]+)\)\s+/i);
  133. 							if (matches)
  134. 							{
  135. 								matches = matches[1].split(',');
  136. 								for (var k = 0, pos = -1; k < matches.length; k++)
  137. 								{
  138. 									if (matches[k].charAt(0) == '[' && (pos = matches[k].lastIndexOf(']')) > 0)
  139. 									{
  140. 										if (new RegExp(unescape(matches[k].substring(1, pos)), matches[k].substring(pos + 
  141.  
  142. 1)).test(url))
  143. 										{
  144. 											active = true;
  145. 											break;
  146. 										}
  147. 									}
  148. 									else
  149. 									{
  150. 										if (/^[\/\\]/.test(matches[k])) matches[k] = window.location.protocol + '//' + 
  151.  
  152. window.location.host + matches[k];
  153. 										else if (!/^[a-z0-9]+:/i.test(matches[k])) matches[k] = base + matches[k];
  154. 										if (unescape(matches[k].replace(/[\/\\]\.([\/\\])/g, 
  155.  
  156. '$1').replace(/[^\/\\]+[\/\\]\.\.[\/\\]/g, '').replace(/#.*/, '')) == url)
  157. 										{
  158. 											active = true;
  159. 											break;
  160. 										}
  161. 									}
  162. 								}
  163. 							}
  164. 						}
  165. 					}
  166. 					if (active)
  167. 					{
  168. 						el.className = (el.className ? el.className + ' ' : '') + 'active';
  169. 						dt._displayed = true;
  170. 						display(dt);
  171. 						hide = false;
  172. 						var el_parentNode = el.parentNode;
  173. 						while (el_parentNode != document.getElementById(id))
  174. 						{
  175. 							if (el_parentNode.nodeName.toLowerCase() == 'dd')
  176. 							{
  177. 								var el_sibling = el_parentNode.previousSibling;
  178. 								while (el_sibling)
  179. 								{
  180. 									if (el_sibling.nodeName.toLowerCase() == 'dt')
  181. 									{
  182. 										el_sibling._displayed = true;
  183. 										display(el_sibling)
  184. 										break;
  185. 									}
  186. 									el_sibling = el_sibling.previousSibling;
  187. 								}
  188. 							}
  189. 							el_parentNode = el_parentNode.parentNode;
  190. 						}
  191. 					}
  192. 				}
  193. 			}
  194. 			if (nodeName == 'dd')
  195. 			{
  196. 				if (hide) el.style.display = 'none';
  197. 				start(el.getElementsByTagName('dt')[0]);
  198. 			}
  199. 			el = el.nextSibling;
  200. 		}
  201. 	}
  202.  
  203. 	function display(dt, i)
  204. 	{
  205. 		if (typeof i == 'undefined')
  206. 		{
  207. 			for (var i = 0; i < dt._dd.length; i++)
  208. 			{
  209. 				dt._dd[i].style.display = dt._displayed ? 'block' : 'none';
  210. 				if (!dt._displayed)
  211. 				{
  212. 					for (var j = 0; j < dt._dd[i].getElementsByTagName('dt').length; j++)
  213. 					{
  214. 						dt._dd[i].getElementsByTagName('dt')[j]._displayed = false;
  215. 						display(dt._dd[i].getElementsByTagName('dt')[j]);
  216. 					}
  217. 				}
  218. 			}
  219. 		}
  220. 		else if (i < dt._dd.length)
  221. 		{
  222. 			var dir = wysun ? !dt._displayed : dt._displayed;
  223. 			var n = dir ? i : dt._dd.length - 1 - i;
  224. 			dt._dd[n].style.display = dt._displayed ? 'block' : 'none';
  225. 			if (!dt._displayed)
  226. 			{
  227. 				for (var j = 0; j < dt._dd[n].getElementsByTagName('dt').length; j++)
  228. 				{
  229. 					dt._dd[n].getElementsByTagName('dt')[j]._displayed = false;
  230. 					display(dt._dd[n].getElementsByTagName('dt')[j]);
  231. 				}
  232. 			}
  233. 			dt._timoutID = setTimeout(function() { display(dt, i + 1); }, dt._displayed ? czasRozwin : czasZwin);
  234. 		}
  235. 	}
  236. }
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <dl id="menu0">
  2. <dt>Nagłówek 1</dt>
  3. <dd>
  4. 	<dl>
  5. 	<dt>Nagłówek 1.1</dt>
  6. 	<dd>
  7. 		<dl>
  8. 		<dt>Nagłówek 1.1.1</dt>
  9. 		<dd>Element 1.1.1.1</dd>
  10. 		<dd>Element 1.1.1.2</dd>
  11. 		<dd>Element 1.1.1.3</dd>
  12. 		<dt>Nagłówek 1.1.2</dt>
  13. 		<dd>Element 1.1.2.1</dd>
  14. 		<dd>Element 1.1.2.2</dd>
  15. 		<dd>Element 1.1.2.3</dd>
  16. 		</dl>
  17. 	</dd>
  18. 	<dt>Nagłówek 1.2</dt>
  19. 	<dd>Element 1.2.1</dd>
  20. 	<dd>Element 1.2.2</dd>
  21. 	<dd>Element 1.2.3</dd>
  22. 	</dl>
  23. </dd>
  24. <dt>Nagłówek 2</dt>
  25. <dd>
  26. 	<dl>
  27. 	<dt>Nagłówek 2.1</dt>
  28. 	<dd>Element 2.1.1</dd>
  29. 	<dd>Element 2.1.2</dd>
  30. 	<dd>Element 2.1.3</dd>
  31. 	<dt>Nagłówek 2.2</dt>
  32. 	<dd>Element 2.2.1</dd>
  33. 	<dd>Element 2.2.2</dd>
  34. 	<dd>Element 2.2.3</dd>
  35. 	</dl>
  36. </dd>
  37. </dl>
[HTML] pobierz, plaintext


Proszę o pomoc
thek
11.01.2013, 08:41:54
Po wklejeniu kodu tutaj chyba samo kolorowanie składni Ci coś powinno powiedzieć. A jeśli nie to konsola JS powinna zamigać errorem. Czy naprawdę trudno załatwić sobie coś z kolorowaniem i sprawdzaniem składni? Większość darmowych edytorów nawet to ma, więc chyba czas zacząć na to zwracać uwagę. A nawet jeśli nie, to JS lint... Ludzie.... Choć trochę inicjatywy własnej :facepalm:
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.