Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][jQuery] Problem z dynamicznym rozwijaniem treści
seniu123
post
Post #1





Grupa: Zarejestrowani
Postów: 8
Pomógł: 0
Dołączył: 29.12.2006

Ostrzeżenie: (0%)
-----

Witam,

mam problem z rozwijanymi treściami. Problem polega na tym że gdy mam wyświetlone powyżej jednej wiadomości to mogę jedynie pierwszą rozwinąć. Z innymi nie da się nic zrobić.

Oto mój kod dla dwóch wiadomości:

[HTML] 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 xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Cos</title>
  6. <script type="text/javascript" src="jquery.js"></script>
  7. <script type="text/javascript">
  8. $(function()
  9. {
  10.  
  11. $("#mostrar").click(function(event) {
  12. event.preventDefault();
  13. $("#caja").slideToggle();
  14. });
  15.  
  16. $("#caja .close").click(function(event) {
  17. event.preventDefault();
  18. $("#caja").slideUp();
  19. });
  20. });
  21. </script>
  22. <style type="text/css">
  23. body {
  24. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  25. 	font-size: 11px;
  26. 	color: #666666;	
  27. }
  28. a{color:#993300; text-decoration:none;}
  29. #caja {
  30. width:70%;
  31. display: none;
  32. padding:5px;
  33. border:2px solid #FADDA9;
  34. background-color:#FDF4E1;
  35. }
  36. #mostrar{
  37. display:block;
  38. width:70%;
  39. padding:5px;
  40. border:2px solid #D0E8F4;
  41. background-color:#ECF8FD;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <a href="#" id="mostrar">Wiadmosc 1</a>
  47.  
  48. <div id="caja">
  49. <a href="#" class="close">[x]</a>
  50. <p>bla bla ba</p>
  51. </div>
  52.  
  53. <a href="#" id="mostrar">Wiadomosc 2</a>
  54.  
  55. <div id="caja">
  56. <a href="#" class="close">[x]</a>
  57. <p>bla bla bla</p>
  58. </div>
  59. </body>
  60. </html>
[HTML] pobierz, plaintext


Z góry dzięki za pomoc (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
mortus
post
Post #2





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

Funkcja parent() działa jednak trochę inaczej, ale przy jej pomocy możemy uzyskać właściwy efekt. Kod:
[HTML] 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 xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.         <title>Cos</title>
  6.         <script type="text/javascript" src="jquery.js">
  7.         </script>
  8.         <script type="text/javascript">
  9.             $(function(){
  10.                 $(".mostrar").click(function(event){
  11.                     event.preventDefault();
  12.                     $(this).parent().find(".caja").slideToggle();
  13.                 });
  14.                 $(".caja .close").click(function(event){
  15.                     event.preventDefault();
  16.                     $($(this).parent(".caja")).slideUp();
  17.                 });
  18.             });
  19.         </script>
  20.         <style type="text/css">
  21.             body {
  22.                 font-family: Verdana, Arial, Helvetica, sans-serif;
  23.                 font-size: 11px;
  24.                 color: #666666;
  25.             }
  26.  
  27.             a {
  28.                 color: #993300;
  29.                 text-decoration: none;
  30.             }
  31.  
  32.             .caja {
  33.                 width: 70%;
  34.                 display: none;
  35.                 padding: 5px;
  36.                 border: 2px solid #FADDA9;
  37.                 background-color: #FDF4E1;
  38.             }
  39.  
  40.             .mostrar {
  41.                 display: block;
  42.                 width: 70%;
  43.                 padding: 5px;
  44.                 border: 2px solid #D0E8F4;
  45.                 background-color: #ECF8FD;
  46.             }
  47.         </style>
  48.     </head>
  49.     <body>
  50.     	<div class="klasa">
  51.         <a href="#" class="mostrar">Wiadmosc 1</a>
  52.         <div class="caja">
  53.             <a href="#" class="close">[x]</a>
  54.             <p>
  55.                 bla bla ba
  56.             </p>
  57.         </div>
  58. 		</div>
  59. 		<div class="klasa">
  60.         <a href="#" class="mostrar">Wiadomosc 2</a>
  61.         <div class="caja">
  62.             <a href="#" class="close">[x]</a>
  63.             <p>
  64.                 bla bla bla
  65.             </p>
  66.         </div>
  67. 		</div>
  68.     </body>
  69. </html>
[HTML] pobierz, plaintext
EDIT:
klasa jest wykorzystywana tylko do nadania odpowiedniego formatowania elementu div i w sumie nie musi jej być.

Ten post edytował mortus 6.04.2010, 13:27:11
Go to the top of the page
+Quote Post

Posty w temacie
- seniu123   [JavaScript][jQuery] Problem z dynamicznym rozwijaniem treści   4.04.2010, 23:38:08
- - tomm   masz dla kilku elementów to samo ID? użyj klasy i ...   5.04.2010, 00:00:49
- - mortus   tomm ma rację, ale postaram się bardziej rozjaśnić...   5.04.2010, 06:51:29
- - seniu123   Po zastosowaniu class teraz otwierają się wszystki...   6.04.2010, 12:30:37
- - thek   Ja bym zamiast bawić się w kilka klas z wszystkim ...   6.04.2010, 12:39:34
|- - mortus   Cytat(thek @ 6.04.2010, 13:39:34 ) Ja...   6.04.2010, 12:47:54
- - seniu123   po zamianie na $(this + " .caja") t...   6.04.2010, 12:53:47
- - mortus   Sorki, miałem w głowie jeszcze inny kod. Tak to rz...   6.04.2010, 13:05:33
- - seniu123   czy mógłbyś to wstawić w ten mój kod, bo jak ja ws...   6.04.2010, 13:17:06
- - mortus   Funkcja parent() działa jednak trochę inaczej, ale...   6.04.2010, 13:25:23
- - seniu123   mortus Wielkie dzięki za pomoc! Wszystko dzia...   6.04.2010, 13:30:54
- - mortus   Kod $(".mostrar").click...   6.04.2010, 13:53:25
- - seniu123   Znowu jest problem.... Po przekształceniu kodu na...   6.04.2010, 23:12:54
- - mortus   Źle to robisz. Zauważ, że kilka razy w pętli while...   7.04.2010, 07:46:07
- - seniu123   Dzięki!!!! Wszystko działa teraz w...   7.04.2010, 13:48:06

« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 12.10.2025 - 06:44
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn