Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: chowanie i pokazywanie diva w jquery [JavaScript][HTML]
Forum PHP.pl > Forum > Przedszkole
kuzuri
27.11.2014, 22:14:28
Witam

problem jest taki iż skrypt się nie wykonuję i nie wiem dlaczego 

[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  3.  
  4. <head>
  5. <title>Untitled 2</title>
  6. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  7. <link href="style.css" rel="stylesheet" type="text/css" />
  8. <style type="text/css"></style>
  9.  
  10. <script type="text/javascript" src="jquery-1.8.2.js"></script>
  11. <script type="text/javascript">
  12.  
  13. jQuery(document).ready(function() {
  14. 		$("#link").click(function() {
  15. 			$("#ajdi").show("slow");
  16. 		});
  17. 	});
  18. </script>	
  19.  
  20.  
  21.  
  22.  
  23.  
  24. </head>
  25.  
  26. <body>
  27.  
  28. <div id="masthead">
  29. 	Baner o dowolnej zawartości do zaprojektowania</div>
  30. <div id="top_nav">
  31. 	<div id="top_nav_box">
  32. 		<div class="path">Current path</div> <div class="link_nav"> <a href="" > Lorem 1 </a></div> <div class="link_nav"><a href="" > Lorem 2 </a></div> <div class="link_nav"><a href="" > Lorem 3 </a></div>
  33. 	</div>
  34. </div>
  35.  
  36.  
  37.  
  38.  
  39. <div id="container">
  40. 	<!-- -->
  41. 	<div id="left_col">
  42. 	   <!-- -->
  43. 	   <div class="module">
  44. 		<div class="module_title">Menu</div>
  45. 		  <div class="module_content">
  46. 			<div class="link_selected"><a href="index.html" > Master </a></div>
  47. 			<div class="link"><a href="Lorem_1.html" > Lorem 1 </a></div>
  48. 			<div class="link"><a href="Lorem_2.html" > Lorem 2 </a> </div>
  49. 			<div class="sub_link"><a href="" > Sub_Lorem 1 </a> </div>
  50. 			<div class="sub_link"><a href="" > Sub_Lorem 2 </a> </div>
  51. 			<div class="sub_sub_link"><a href="" > sub_sub_Lorem 2 </a> </div>
  52. 			<div class="link"><a href="" > Lorem 3 </a> </div>
  53. 		  </div>
  54. 		</div>
  55. 		<!-- -->
  56. 	   <div class="module">
  57. 		<div class="module_title">Other menu</div>
  58. 		  <div class="module_content">
  59. 			<div class="link_selected"><a href="index.html" > Master </a></div>
  60. 			<div class="link"><a href="Lorem_1.html" > Lorem 1 </a></div>
  61. 			<div class="link"><a href="Lorem_2.html" > Lorem 2 </a> </div>
  62. 			<div class="sub_link"><a href="" > Sub_Lorem 1 </a> </div>
  63. 			<div class="sub_link"><a href="" > Sub_Lorem 2 </a> </div>
  64. 			<div class="sub_sub_link"><a href="" > sub_sub_Lorem 2 </a> </div>
  65. 			<div class="link"><a href="" > Lorem 3 </a> </div>
  66. 		  </div>
  67. 		</div>
  68. 	</div>
  69.  
  70. 	<div id="page_content">
  71. 		<div class="article">
  72. 			<div class="article_title">
  73. 				Lorem ipsum dolor sit amet
  74. 			</div>
  75. 			<div class="article_summary">
  76.                 <a href="#" id="link">Kliknij mnie!</a>
  77. 					<div id="ajdi" style="width:300px;display;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumyeirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diamvoluptua. At vero eos et accusam et justo duo dolores et</div>
  78.  
  79. 			</div>
  80. 			<div class="article_content">
  81. dkds;sdk;fks;dkf;label
  82. </div>
  83. </div>
  84. </div>
  85.  
  86.  
  87.  
  88.  
  89.  
  90. 	<!-- -->
  91. 	<div id="right_col">
  92. 		<!-- -->
  93. 		<div class="module">
  94. 		<div class="module_title">Module</div>
  95. 		  <div class="module_content">
  96. 			Some content build form database:
  97. 			for example: statistics or other.
  98. 		  </div>
  99. 		</div>
  100. 	</div>
  101.  
  102. </div>
  103. <div class="czysc"></div>
  104. <div id="footer">
  105. 	<div class="footer_box">
  106. 		  <div class="link_foot"><a href="" > Lorem 1 </a></div> <div class="link_foot"><a href="" > Lorem 2 </a></div>
  107. 	  </div>	
  108. </div>
  109.  
  110. </body>
  111.  
  112. </html>
  113.  
[PHP] pobierz, plaintext

kamilo818
27.11.2014, 22:19:38
jak dla mnie to nie masz nigdzie div'a z clasa title tylko a z klasa title
[PHP] pobierz, plaintext 
  1. $("div.title").click(function(){
[PHP] pobierz, plaintext


na

[PHP] pobierz, plaintext 
  1. $("a.title").click(function(){
[PHP] pobierz, plaintext
trueblue
27.11.2014, 22:31:32
Dodatkowo trzeba zatrzymać domyślne zdarzenie na click:
[HTML] pobierz, plaintext 
  1. $("#link").click(function(e){
  2.  e.preventDefault();
  3. ....
  4. });
[HTML] pobierz, plaintext
div ma być niewidoczny, obecnie ma styl domyślny, bo błędnie wprowadziłeś styl inline.[html][/html]
kuzuri
27.11.2014, 22:49:01
niestety nic nie pomogło już sam nie wiem co jest nie tak
kamilo818
27.11.2014, 22:56:26
tak nie dziala?
[PHP] pobierz, plaintext 
  1.     $("a#link").click(function(e){
  2.     e.preventDefault();
  3.     $("div#ajdi").show();
  4.     });
[PHP] pobierz, plaintext
kuzuri
27.11.2014, 23:07:20
niestety tak też nic
kamilo818
27.11.2014, 23:25:52
a masz wogole tego ajdi ukrytego ze chcesz go pokazac?
zrob toggle to bedzie i ukrywac i pokazywac
[PHP] pobierz, plaintext 
  1.      $("a#link").click(function(e){
  2.     e.preventDefault();
  3.     $("div#ajdi").toggle();
  4.     });
[PHP] pobierz, plaintext


zmien
[PHP] pobierz, plaintext 
  1. <div id="ajdi" style="width:300px;display;">
[PHP] pobierz, plaintext

na
[PHP] pobierz, plaintext 
  1. <div id="ajdi" style="width:300px;display:none;">
[PHP] pobierz, plaintext


Turson
28.11.2014, 22:25:11
Błędów masz wiele.
a#title - nie istnieje element z takim ID a co najwyżej klasą
$(this).closest("article_summary").find("content");
nie istnieją elementy article_summary ani content
kuzuri
4.12.2014, 19:47:45
skrypt nie pokazuje/nie chowa tekstu i nie potrafię znaleźć błędu 



[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html >
  3.  
  4. <head>
  5. <title>Untitled 2</title>
  6. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  7. <link href="style.css" rel="stylesheet" type="text/css" />
  8. <style type="text/css"></style
  9.  
  10. <script type="text/javascript" src="jquery-1.8.2.js"></script>
  11. <script type="text/javascript">
  12. jQuery(document).ready(function (){
  13.  
  14. $("a#title").click(function(){
  15. var body = $(this).closest('article').find('#content');
  16. /*if (content.is (':hidden'));*/
  17. {
  18. $("div#content").show();
  19. /*$body.show();*/
  20. }
  21. else
  22. {
  23. $("div#content").hide();
  24. /*$body.hide();*/
  25. }
  26. });
  27. });
  28. </script>
  29.  
  30. </head>
  31.  
  32. <body>
  33.  
  34. <div id="masthead">
  35. 	Baner o dowolnej zawartości do zaprojektowania</div>
  36. <div id="top_nav">
  37. 	<div id="top_nav_box">
  38. 		<div class="path">Current path</div> <div class="link_nav"> <a href="" > Lorem 1 </a></div> <div class="link_nav"><a href="" > Lorem 2 </a></div> <div class="link_nav"><a href="" > Lorem 3 </a></div>
  39. 	</div>
  40. </div>
  41.  
  42.  
  43.  
  44.  
  45. <div id="container">
  46. 	<!-- -->
  47. 	<div id="left_col">
  48. 	   <!-- -->
  49. 	   <div class="module">
  50. 		<div class="module_title">Menu</div>
  51. 		  <div class="module_content">
  52. 			<div class="link_selected"><a href="index.html" > Master </a></div>
  53. 			<div class="link"><a href="Lorem_1.html" > Lorem 1 </a></div>
  54. 			<div class="link"><a href="Lorem_2.html" > Lorem 2 </a> </div>
  55. 			<div class="sub_link"><a href="" > Sub_Lorem 1 </a> </div>
  56. 			<div class="sub_link"><a href="" > Sub_Lorem 2 </a> </div>
  57. 			<div class="sub_sub_link"><a href="" > sub_sub_Lorem 2 </a> </div>
  58. 			<div class="link"><a href="" > Lorem 3 </a> </div>
  59. 		  </div>
  60. 		</div>
  61. 		<!-- -->
  62. 	   <div class="module">
  63. 		<div class="module_title">Other menu</div>
  64. 		  <div class="module_content">
  65. 			<div class="link_selected"><a href="index.html" > Master </a></div>
  66. 			<div class="link"><a href="Lorem_1.html" > Lorem 1 </a></div>
  67. 			<div class="link"><a href="Lorem_2.html" > Lorem 2 </a> </div>
  68. 			<div class="sub_link"><a href="" > Sub_Lorem 1 </a> </div>
  69. 			<div class="sub_link"><a href="" > Sub_Lorem 2 </a> </div>
  70. 			<div class="sub_sub_link"><a href="" > sub_sub_Lorem 2 </a> </div>
  71. 			<div class="link"><a href="" > Lorem 3 </a> </div>
  72. 		  </div>
  73. 		</div>
  74. 	</div>
  75.  
  76. 	<div id="page_content">
  77. 		<div class="article">
  78. 			<div class="article_title">
  79. 				Lorem ipsum dolor sit amet
  80. 			</div>
  81. 			<div class="article_summary">
  82.  
  83. 				<a href="#" id="title">Summary:</a>
  84. 				<div id="content" style="width:350px; display:none;   ">
  85. 				 AAAAAAAAAAASummary about lorem ipsum  Etiam imperdiet arcu est, in facilisis lacus. Nunc faucibus orci nec diam ullamcorper vitae hendrerit enim scelerisque. Fusce odio nulla, aliquet in auctor ac, congue quis turpis. Nunc et ipsum sem. Donec mollis erat neque. Donec ultricies lectus quis lacus sagittis non ultrices odio auctor. Vivamus erat nunc, mollis et posuere non, elementum tempor mi.
  86. 			</div>
  87. 			</div>
  88. 			<div class="article_content">
  89. 			<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam imperdiet arcu est, in facilisis lacus. Nunc faucibus orci nec diam ullamcorper vitae hendrerit enim scelerisque. Fusce odio nulla, aliquet in auctor ac, congue quis turpis. Nunc et ipsum sem. Donec mollis erat neque. Donec ultricies lectus quis lacus sagittis non ultrices odio auctor. Vivamus erat nunc, mollis et posuere non, elementum tempor mi.</p>
  90. 			<p class="p2">
  91. 			Some lorem ipsum tekst
  92. 			<ul>
  93. 				<li> Duis vitae est turpis. </li> 
  94. 	 			<li> Praesent elit lacus, </li> 
  95. 	 		</ul>	
  96. 			</p>
  97. 			<ol>
  98. 	 <li> Duis vitae est turpis. </li> 
  99. 	 <li> Praesent elit lacus, </li> 
  100. 	 <li> Pellentesque sed mollis sit amet, </li> 
  101. 	 <li> Auctor id ligula. Sed nec sodales velit. </li>
  102. 	 	<ul>
  103. 	 		<li> Duis vitae est turpis. </li> 
  104. 	 		<li> Praesent elit lacus, </li> 
  105. 	 	</ul>
  106. 	 <li> Pellentesque sed mollis sit amet, </li> 
  107. 	 <li> Auctor id ligula. Sed nec sodales velit. </li>
  108.  
  109.  
  110. 	</ol></p>
  111. 			<p class="p3"></p>
  112. 			</div>
  113. 		</div>
  114.  
  115.  
  116.  
  117. <p>Proin felis velit, blandit sit amet viverra quis, bibendum ut turpis. Morbi leo leo, ornare id sollicitudin egestas, euismod eget erat. Mauris porta tempor rhoncus. Pellentesque consequat sapien a dui tempus tempor. Aenean augue purus, volutpat nec semper vitae, tempor in eros. Praesent sed est eu odio iaculis condimentum sed in felis. Aenean quis orci enim. Maecenas blandit risus sit amet enim interdum in tempus lectus sollicitudin. Fusce mi urna, consequat venenatis lobortis vitae, consequat eget purus. Nunc blandit dolor non arcu mollis vel fermentum nibh consequat. Phasellus sed urna neque, quis laoreet nunc. Vestibulum id quam sed lectus tincidunt dapibus. Morbi vehicula ornare metus vel tristique. Proin felis diam, laoreet sed feugiat et, luctus eu nisi. Integer vel metus elit.</p>
  118.  
  119. <p>Quisque eget turpis lectus. Nam sit amet massa libero, a accumsan diam. Mauris ac placerat dolor. Vestibulum vel erat a felis mattis convallis nec id sapien. Duis ornare dui nec diam placerat at volutpat tortor dignissim. Sed ornare aliquet auctor. Nam et tellus vitae ipsum faucibus ultrices id eleifend mauris. Pellentesque et molestie ligula. Nullam augue risus, elementum sit amet pellentesque ac, gravida at lorem. Sed hendrerit mauris sed diam sodales quis sodales ligula condimentum. In consectetur tincidunt est vitae consectetur.</p>
  120. 	</div>
  121. 	<!-- -->
  122. 	<div id="right_col">
  123. 		<!-- -->
  124. 		<div class="module">
  125. 		<div class="module_title">Module</div>
  126. 		  <div class="module_content">
  127. 			Some content build form database:
  128. 			for example: statistics or other.
  129. 		  </div>
  130. 		</div>
  131. 	</div>
  132.  
  133. </div>
  134. <div class="czysc"></div>
  135. <div id="footer">
  136. 	<div class="footer_box">
  137. 		  <div class="link_foot"><a href="" > Lorem 1 </a></div> <div class="link_foot"><a href="" > Lorem 2 </a></div>
  138. 	  </div>	
  139. </div>
  140.  
  141. </body>
  142.  
  143. </html>
[PHP] pobierz, plaintext
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.