Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][jQuery]Skrócenie zapisu
Forum PHP.pl > Forum > Przedszkole
MateuszS
Hi. Zacząłem naukę jQuery bo wypada znać, postanowiłem zrobić sobie proste dynamiczne menu. No i zrobiłem

  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.  
  32.  
  33. <script type="text/javascript" src="jQuery.js"></script>
  34.  
  35.  
  36.  
  37. <script type="text/javascript">
  38.  
  39. $(document).ready( function() {
  40. $(".li").click( function() {
  41. $(this).next("p").toggle("slow");
  42. $(".a").click( function () {
  43. $(".p1").show("slow");
  44. $("p").not(".p1").not(".p").hide();
  45. });
  46. $(".a2").click( function () {
  47. $(".p2").show("slow");
  48. $("p").not(".p2").not(".p").hide();
  49. });
  50.  
  51. });
  52. });
  53.  
  54.  
  55.  
  56. </head>
  57. <body vlink="white" link="white" alink="white">
  58.  
  59. <div class="div1">
  60. <b>Menu</b>
  61. <ul class="ul">
  62. <li class="li">Menu pierwsze </li>
  63. <p class="p"><a href="#" class="a">Akapit do rozwinięcia 1</a></p>
  64.  
  65. <li class="li">Menu drugie </li>
  66. <p class="p"><a href="#" class="a2">Akapit do rozwinięcia 2</a></p>
  67. </ul>
  68. </div>
  69. <div class="div2">
  70. <p class="p1">Myślę że to dobre rozwiązanie</p>
  71. <p class="p2">Myślę że to jest wszystko porąbane</p>
  72. </div>



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
Crozin
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.
MateuszS
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
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.