Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jquery toggle rozwiń/zwiń (style/text)?
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
marcus755
Zrobiłem coś takiegie, jak poniżej:

  1. <tr>
  2. <td class="detal"><a href="#" id="pokaz">Rozwiń</a></td>
  3. </tr>
  4. <tr id="wiecej">
  5. <td>cośtam</td>
  6. </tr>
  7.  
  8. $("#pokaz").click(function(e){
  9. e.preventDefault(e);
  10. $("#wiecej").toggle();
  11. $(".detal").removeClass("detal").addClass("detal2");
  12. $("#pokaz").text('Zwiń');
  13. if ($("#pokaz").click(function(e){
  14. $(".detal2").removeClass("detal2").addClass("detal");
  15. $("#pokaz").text('Rozwiń');
  16. }));
  17. else {
  18. $(".detal").removeClass("detal").addClass("detal2");
  19. $("#pokaz").text('Zwiń');
  20. }
  21. });


Jak to powyżej uprościć i zapętlić, używając jquery toggle?
Chodzi o to, że mam link, który ma klasę detail oraz tekst w linku Rozwiń,
po kliknięciu ma pokazywać zawartość o id="more" i się zmieniać na klasę detail2 oraz tekst w linku Zwiń.
Po ponownym kliknięcie, wszystko wraca do punktu wyjścia.
Jak klikam jeszcze raz - nie zmienia mi klasy i tekstu...
Powyższy skrypt działa, ale po kolejnym kliknięciu, nie robi "zapętla się"...
erix
Cytat
Powyższy skrypt działa, ale po kolejnym kliknięciu, nie robi "zapętla się"...

Nie masz czasem więcej elementów o id="pokaz"?
marcus755
tzn. zrobiłem dla id="pokaz", id="pokaz2", id="pokaz3"...
sowiq
Cytat(marcus755 @ 11.06.2013, 15:33:54 ) *
po kolejnym kliknięciu, nie robi "zapętla się"...

A to dlatego, że po każdym kliknięciu dodajesz nową akcję na zdarzenie click:
[JAVASCRIPT] pobierz, plaintext
  1. $("#pokaz").click(function(e){
  2. // ....
  3. $("#pokaz").click(function(e){ //// <- to powoduje, że po każdym kliknięciu Twoja funkcja przypisana jest na nowo
  4. // ....
  5. });
  6. // ....
  7. });
[JAVASCRIPT] pobierz, plaintext


Proponuję zrobić tak:
[JAVASCRIPT] pobierz, plaintext
  1. $("#pokaz").click(function(e){
  2. if($(this).hasClass('detal2')){
  3. // aktualny stan = aktywny. Tutaj chowasz co potrzeba
  4. $(this).removeClass('detal2').addClass('detal');
  5. $(this).text('Rozwiń');
  6. // ...
  7. }
  8. else{
  9. // aktualny stan = nieaktywny. Tutaj pokazujesz co potrzeba
  10. $(this).removeClass('detal').addClass('detal2');
  11. $(this).text('Zwiń');
  12. // ...
  13. }
  14. });
[JAVASCRIPT] pobierz, plaintext


Oczywiście resztę musisz dopisać sobie sam.
erix
Cytat
tzn. zrobiłem dla id="pokaz", id="pokaz2", id="pokaz3"...

A o klasach w CSS, to Ty słyszałeś? tongue.gif
marcus755
thnx a lot:-)
pyro
  1. e.preventDefault(e);


na obiekcie e wykonujesz metodę podając jako argument... obiekt e.
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.