Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Rozwijane Menu
Forum PHP.pl > Forum > Przedszkole
ewelinac18
30.04.2011, 06:25:51
Witam, mam problem i nie mogę sobie z nim poradzić.
Problem tkwi w tym, że po kliknięciu w SubMenu zamiast mnie przekierować to chowa całą klase.
W jaki sposób zrobić tak aby po kliknięciu w SubMenu mnie przekierowało, a po kliknięciu w Menu rozwijało się SubMenu tak jak jest obecnie .


Skrypt można zobaczyć tu: http://s-port.nazwa.pl/jq_menu.html

[HTML] pobierz, plaintext 
  1. <html>
  2. 	<head>
  3. 		<title>jQuery Menu</title>
  4. 		<meta charset="ISO-8859-2" />
  5. 		<meta name="keywords" content="#" />
  6. 		<meta name="description" content="#" />
  7. 		<meta name="language" content="pl" />
  8. 		<meta name="robots" content="index, follow" />
  9.  
  10.                 <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
  11. 		<script>
  12. 		$(document).ready(function() {
  13. 		      $("#vert li").each(function() {
  14. 			     if ($(this).find('ul:first').length > 0) {
  15. 				    $(this).addClass('arDown');
  16. 			     }
  17. 			     if ($(this).hasClass("on")) {
  18. 				    $(this).find('ul:first').slideToggle('fast');
  19. 			     }
  20. 		      });
  21. 		      $("#vert ul li").click(function() {
  22. 			     if ($(this).find('ul:first').length > 0) {
  23. 				    $(this).find('ul:first').slideToggle('fast');
  24. 				    $(this).toggleClass('on');
  25. 				    return false;
  26. 			     }
  27. 		      });
  28.                 });
  29. 		</script>
  30.  
  31. 		<style type="text/css">
  32. 		<!--
  33.  
  34. 			#vert ul {
  35. 				float: left;
  36. 				width: 168px;
  37. 				margin: 0;
  38. 				list-style: none;
  39. 				background: white; }
  40.  
  41. 				#vert > ul > li {
  42. 					float: left;
  43. 					width: 168px;
  44. 					margin: 2px 0;
  45. 					padding: 2px 0;
  46. 					border-bottom: 1px solid #ebebeb; }
  47.  
  48. 				#vert > ul > li:last-child { border: 0 none; }
  49.  
  50. 				#vert > ul > li > a {
  51. 					float: left;
  52. 					width: 168px;
  53. 					font-family: "MyriadPro-Semibold", "Arial";
  54. 					font-size: 14px;
  55. 					text-shadow: 1px 1px 1px #fff;
  56. 					color: #444; }
  57.  
  58. 				#vert a:hover {
  59. 					text-decoration: none;
  60. 					color: #039ec3; }
  61.  
  62. 				.arDown { background: url(el.png) right -67px; }
  63.  
  64. 				#vert .on { background: url(el.png) right -94px; }
  65.  
  66. 				#vert .on > a { color: #2cb91e !important; }
  67.  
  68. 			#vert ul ul {
  69. 				display: none;
  70. 				margin: 5px 0; }
  71.  
  72. 				#vert ul ul li {
  73. 					width: 158px;
  74. 					background: url(el.png) left -42px;
  75. 					padding-left: 10px;
  76. 					margin: 1px 0; }
  77.  
  78. -->
  79. </style>
  80.  
  81.  
  82.  
  83. 	</head>
  84.  
  85. <body>
  86.  
  87.  
  88. <nav id="vert">
  89. 	<ul>
  90. 		<li><a href="#menu">Menu 1</a></li>
  91. 		<li><a href="#menu">Menu 2</a>
  92. 			<ul>
  93. 				<li><a href="#submenu">SubMenu 1</a></li>
  94. 				<li><a href="#submenu">SubMenu 2</a></li>
  95. 				<li><a href="#submenu">SubMenu 3</a></li>
  96. 				<li><a href="#submenu">SubMenu 4</a></li>
  97. 				<li><a href="#submenu">SubMenu 5</a></li>
  98. 			</ul>
  99. 		</li>
  100. 		<li><a href="#menu">Menu 3</a></li>
  101. 		<li><a href="#menu">Menu 4</a></li>
  102. 		<li><a href="#menu">Menu 5</a></li>
  103. 	</ul>
  104.  
  105. </nav>
  106.  
[HTML] pobierz, plaintext
ActivePlayer
30.04.2011, 07:08:51
zauwaz ze click dodałeś do całego li, a więc wszsystko pomiędzy 91 a 99 linią objęte będzie zdarzeniem. jak bys zbindował tag "a" zamisast "li" wtedy osiagnąłbys efekt. jedynie co dodatkowo musiałbys zrobic to przerobic a zeby bylo wyswietlane blokowo (zeby zajmowało cały obszar na szerokość a nie tylko miejsce gdzie jest tekst).

Kod
$("#vert ul li").click(function() {

na
Kod
$("#vert ul li a").click(function() {

+ w kodzie $(this) na $(this).parent()

no i css
ewelinac18
30.04.2011, 08:51:32
Udało sie, bardzo dziękuje za pomoc smile.gif
solo112
23.03.2013, 20:25:14
Witam,
ćwiczę tworzenie menu na skrypcie pokazanym przez ewelinac18. Próbuję się zastosować do wskazówek ActivPlayera ale nie działają. Co robię źle?
Jak jest taka możliwość to proszę o wyświetlenie poprawionego 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.