Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [CSS][jQuery]Skrócenie zapisu
MateuszS
post
Post #1





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

Hi. Zacząłem naukę jQuery bo wypada znać, postanowiłem zrobić sobie proste dynamiczne menu. No i zrobiłem

[HTML] pobierz, plaintext 
  1. <style type="text/css">
  2.  
  3. div.div1 {
  4. margin-top: 50px;
  5. margin-left: 20px;
  6. background: green;
  7. width: 200px;
  8. color: white;
  9. float: left;
  10. }
  11.  
  12. div.div2 {
  13. margin-top: 50px;
  14. width: 400px;
  15. background: blue;
  16. display: block;
  17. float: left;
  18. }
  19.  
  20. p.p {
  21. display: none;
  22. }
  23.  
  24. p.p1 {
  25. display: none;
  26. }
  27.  
  28. p.p2 {
  29. display: none;
  30. }
  31. </style>
  32.  
  33.  
  34. <script type="text/javascript" src="jQuery.js"></script>
  35.  
  36.  
  37.  
  38. <script type="text/javascript">
  39.  
  40. $(document).ready( function() {
  41.     $(".li").click( function() {
  42.     $(this).next("p").toggle("slow");
  43.     $(".a").click( function () {
  44.         $(".p1").show("slow");
  45.         $("p").not(".p1").not(".p").hide();
  46.     });    
  47.     $(".a2").click( function () {
  48.         $(".p2").show("slow");
  49.         $("p").not(".p2").not(".p").hide();    
  50.     });
  51.  
  52. });
  53. });    
  54.  
  55.  
  56. </script>
  57.  
  58. </head>
  59. <body vlink="white" link="white" alink="white">
  60.  
  61. <div class="div1">
  62.     <b>Menu</b>
  63.     <ul class="ul">
  64.         <li class="li">Menu pierwsze </li>
  65.             <p class="p"><a href="#" class="a">Akapit do rozwinięcia 1</a></p>
  66.  
  67.         <li class="li">Menu drugie </li>
  68.             <p class="p"><a href="#" class="a2">Akapit do rozwinięcia 2</a></p>
  69.     </ul>    
  70. </div>    
  71. <div class="div2">
  72.     <p class="p1">Myślę że to dobre rozwiązanie</p>
  73.     <p class="p2">Myślę że to jest wszystko porąbane</p>
  74. </div>
[HTML] pobierz, plaintext



No i chce sie zapytac czy da sie to okrocic bo nie bede co nowy dzial dodawal 10 linijek jQuery i stylow. Myslalem nad zrobieniem funkcji ale musialbym jakos zmienna wpakowac pod klase jednak nie bardzo wiem jak ^^ Nakierujcie mnie prosze. Pozdrawiam


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
Crozin
post
Post #2





Grupa: Zarejestrowani
Postów: 6 476
Pomógł: 1306
Dołączył: 6.08.2006
Skąd: Kraków

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

1) Formatuj jakoś ten kod... nie da się go ogarnąć.
2) Po co dajesz jakieś klasy "li", "div" etc. Nie możesz operować po nazwach elementów?
3) Ucz się, jeżeli jest to Ci potrzebne/przydatne, a nie "bo wypada"
4) Napisz co chciałbyś osiągnąć, jaki efekt.
Go to the top of the page
+Quote Post
MateuszS
post
Post #3





Grupa: Zarejestrowani
Postów: 1 429
Pomógł: 195
Dołączył: 6.10.2008
Skąd: Kraków/Tomaszów Lubelski

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

Chcialbym wywalic te klasy p1 p2 a a2 zeby nie musiec co akapit dodawac p3 p4 a3 a4 itd. Wlasnie chce go jakos ogarnac skrocic zapis


--------------------
O! Zimniok :P
Go to the top of the page
+Quote Post
« 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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