Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [Jquery][JS] Poprawa kodu - zwijanie i odwijanie
yozer2308
post 4.01.2012, 09:38:35
Post #1





Grupa: Zarejestrowani
Postów: 10
Pomógł: 1
Dołączył: 12.12.2011

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

[HTML] pobierz, plaintext 
  1. <font face="Verdana" size="3">
  2. <b>09 styczeń 2012 - Szkolenie 1 test</b>
  3. </font>
  4.  
  5. <font face="Verdana" size="2">
  6. <p id="szk1">
  7. Test to działa!
  8. </p></font>
  9. <font face="Verdana" size="1">
  10. <p id="show1" align="right" style="color:  red; cursor: pointer;">więcej...
  11. </p></font>
  12.  
  13. <font face="Verdana" size="3">
  14. <b>09 styczeń 2012 - Szkolenie 2 test</b>
  15. </font>
  16.  
  17. <font face="Verdana" size="2">
  18. <p id="szk2">
  19. Test to działa! Hura!
  20. </p></font>
  21. <font face="Verdana" size="1">
  22. <p id="show2" align="right" style="color:  red; cursor: pointer;">więcej...
  23. </p></font>
[HTML] pobierz, plaintext


I taki kod jquery:

[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. $('#szk1').css('display','none');
  4.     $('#show1').click(function(){
  5.         if ($("#szk1").is(":hidden")) {
  6.  
  7.             $("#szk1").slideDown("slow");
  8.             $('#show1').text('schowaj...');
  9.  
  10.             }
  11.         else{
  12.  
  13.         $("#szk1").slideUp("slow");
  14.         $('#show1').text('więcej...');
  15.  
  16.         }
  17. });
  18.  
  19. $('#szk2').css('display','none');
  20.     $('#show2').click(function(){
  21.         if ($("#szk2").is(":hidden")) {
  22.             $("#szk2").slideDown("slow");
  23.             $('#show2').text('schowaj...');
  24.             }
  25.         else{
  26.         $("#szk2").slideUp("slow");
  27.         $('#show2').text('więcej...');
  28.         }
  29.  
  30.       });
  31.  
  32. });
[HTML] pobierz, plaintext


W przypadku dwóch rozwijających się elementów, jeszcze ujdzie chociaż i tak brzydko to wygląda.
A ja nie mam pomysłu jak to zrobić tak "elegencko" (tzn. żebym do każdego rozwijanego elementu nie musiał dodawać znowu tych kilku linijek).

Ten post edytował yozer2308 4.01.2012, 09:39:20
Go to the top of the page
+Quote Post
kaem
post 4.01.2012, 09:55:57
Post #2





Grupa: Zarejestrowani
Postów: 248
Pomógł: 38
Dołączył: 29.06.2008

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

Zamiast id nadaj tym elementom takie same klasy, np: class="szk" i class="show". Wrzuć każdy powtarzający się kawałek htmla do diva. I teraz jak klikniesz w element $('.szk'), szukasz elementu o klasie show znadjującego się w tym samym divie i sprawdzasz czy jest ukryty. Pomogą Ci w tym, np. takie metody JQuery: parent(), find(), children(), eq(), hth-child(). Sposobów w sumie na rozwiązanie tego problemu jest jest kilka. Przejrzyj doc jQuery bo tam jest b. ładnie wszystko opisane.
Go to the top of the page
+Quote Post
by_ikar
post 4.01.2012, 12:10:28
Post #3





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

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

Lepiej użyć coś uniwersalnego:

[JAVASCRIPT] pobierz, plaintext 
  1. $(document).ready(function(){
  2.     $('.hide').css('display', 'none');
  3.     $('.showhide').click(function() {
  4.         var href = $(this).attr('href');
  5.         $(href).slideToggle(300);
  6.         return false;
  7.     });
  8. });
[JAVASCRIPT] pobierz, plaintext


Przykład:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <script src="http://code.jquery.com/jquery-latest.js"></script>
  5.   <script>
  6.     $(document).ready(function(){
  7.         $('.hide').css('display', 'none');
  8.         $('.showhide').click(function() {
  9.             var href = $(this).attr('href');
  10.             $(href).slideToggle(300);
  11.             return false;
  12.         });
  13.     });
  14.   </script>
  15. </head>
  16. <body>
  17.  
  18. <a href="#szk2" class="showhide">więcej...</a>
  19. <div id="szk2" class="hide">Test to działa! Hura!</div>
  20.  
  21. </body>
  22. </html>
[HTML] pobierz, plaintext


Skopiuj sobie kod html, zapisz otwórz w przeglądarce kliknij na "więcej..". W href podajesz identyfikator, razem z hashem, elementu który ma zostać "odsłonięty" po kliknięciu. Elementowi który ma być ukryty nadajesz klasę hide, coby od razu go ukryć.
Go to the top of the page
+Quote Post
yozer2308
post 4.01.2012, 14:39:17
Post #4





Grupa: Zarejestrowani
Postów: 10
Pomógł: 1
Dołączył: 12.12.2011

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

Ok, działa pięknie. Dokładnie o coś takiego mi chodziło.
Dzięki.

Tylko po co return false; na końcu?

Ten post edytował yozer2308 4.01.2012, 14:44:29
Go to the top of the page
+Quote Post
by_ikar
post 4.01.2012, 15:15:51
Post #5





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

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

Po to żeby ci tej kotwicy która jest w linku nie przypisywało do adresu.
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · 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 Wersja Lo-Fi Aktualny czas: 19.07.2025 - 15:04
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn