Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] rozwijane menu
Forum PHP.pl > Forum > Przedszkole
szpakoo
9.11.2008, 17:57:20
Zrobiłem proste rozwijane menu, ale niestety nie da się w nim kliknąć w link, który się rozwinie bo zamiast przenieść do pliku w atrybucie href tego linku to zwija te linki. Oto kod, potrzebne załączenie jquery

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  4. <head>
  5.  
  6. <script type="text/javascript" src="jquery.js"></script>
  7.  
  8. 		<script type="text/javascript">
  9.  
  10. 	$(document).ready(
  11. 	function()
  12. 	{	
  13. 		$("#menu1").click(
  14. 		function()
  15. 		{
  16. 			$("#submenu1").toggle('slow');
  17. 			return false;
  18. 		});
  19. 		$("#menu2").click(
  20. 		function()
  21. 		{
  22. 			$("#submenu2").toggle('slow');
  23. 			return false;
  24. 		});	
  25. 		$("#menu3").click(
  26. 		function()
  27. 		{
  28. 			$("#submenu3").toggle('slow');
  29. 			return false;
  30. 		});
  31. 	});
  32.  
  33. 		</script>
  34.  
  35. </head>
  36. <body>
  37.  
  38. 		<ul id="leftmenu">
  39.  
  40. 			<li id="menu1">
  41. 				<a href="?ass" title="" >menu 1</a>				
  42.    				<ol id="submenu1" style="display:none;">
  43.    					<li><a href="1a.html" title="">menu 1 - a</a></li>
  44.    					<li><a href="1b" title="">menu 1 - b</a></li>
  45.    					<li><a href="1c" title="">menu 1 - c</a></li>					
  46.    					<li><a href="1d" title="" class="last">menu 1 - d</a></li>
  47.    				</ol>				
  48. 			</li>
  49.  
  50. 			<li id="menu2">
  51. 				<a href="#" title="">menu 2</a>
  52.    				<ol id="submenu2" style="display:none;">
  53.    					<li><a href="2a" title="">menu 2 - b</a></li>
  54.    					<li><a href="2b" title="">menu 2 - c</a></li>
  55.    					<li><a href="2c" title="">menu 2 - c</a></li>					
  56.    					<li><a href="2d" title="" class="last">menu 1 - d</a></li>
  57.    				</ol>
  58. 			</li>
  59.  
  60. 			<li id="menu3">
  61. 				<a href="#" title="">menu 3</a>
  62.    				<ol id="submenu3" style="display:none;">
  63.    					<li><a href="3a" title="">menu 3 - a</a></li>
  64.    					<li><a href="3b" title="">menu 3 - b</a></li>
  65.    					<li><a href="3c" title="">menu 3 - c</a></li>					
  66.    					<li><a href="3d" title="" class="last">menu 3 - d</a></li>
  67.    				</ol>			
  68. 			</li>
  69.  
  70. 		</ul>
  71.  
  72. </body>
  73. </html>
[HTML] pobierz, plaintext


Jakby się dało jeszcze jakoś przerobić tą funkcję jquery żeby do każdego punktu list nie trzeba było dopisywać kawałka kodu JS byłoby świetnie. z góry dzięi za sugestie.
erix
9.11.2008, 20:54:11
return false w callbackach sprawia, że link nie zostanie otwarty.

Cytat
żeby do każdego punktu list nie trzeba było dopisywać kawałka kodu JS byłoby świetnie


Kod
$("#leftmenu > li").click(
function()
{
$("ol", $(this)).toggle('slow');
});
szpakoo
9.11.2008, 21:27:55
troche to przerobiłem i działa jak należy, z tym że dla każdego wpisu menu trzeba dołączyć regułke rozwijania. Teraz część menu wygląda tak:
[HTML] pobierz, plaintext 
  1. <ul id="leftmenu">
  2.  
  3. 			<li>
  4. 				<a href="masa.html" title="" id="menu1" >menu 1</a>				
  5.    				<ol id="submenu1" style="display:none;">
  6.    					<li><a href="1a.html" title="">menu 1 - a</a></li>
  7.    					<li><a href="1b" title="">menu 1 - b</a></li>
  8.    					<li><a href="1c" title="">menu 1 - c</a></li>					
  9.    					<li><a href="1d" title="" class="last">menu 1 - d</a></li>
  10.    				</ol>				
  11. 			</li>
  12. 			<itd>
[HTML] pobierz, plaintext

niestety
Cytat
$("#leftmenu > li").click(
function()
{
$("ol", $(this)).toggle('slow');
});

nie idzie, próbowałem to troche przerobić żeby podpasowało pod moją przeróbke, ale kiepsko idzie mi jQuery.
erix
10.11.2008, 22:20:52
A może kawałek kodu?
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.