Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] Wysuwany panel i zmiana klasy
oomaster
post
Post #1





Grupa: Zarejestrowani
Postów: 305
Pomógł: 3
Dołączył: 4.08.2006
Skąd: GDA

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


Witam,

Kompletnie nie mogę zaradzić problemu który mi się pojawił. Otóz mam kod

  1. <a href="#" id="link"><div id="hide"></div></a>
  2.  
  3. <p id="more" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>

Mało poprawny ale jest (IMG:style_emoticons/default/winksmiley.jpg)
[JAVASCRIPT] pobierz, plaintext
  1. <script type="text/javascript">
  2. $(document).ready(
  3. function()
  4. {
  5. $("#link").click(
  6. function()
  7. {
  8. $("#more").toggle("normal");
  9. }).toggle(function() { $(this).html("<div id=hide></div>"); }, function() { $(this).html("<div id=hideou></div>"); });
  10. });
  11. </script>
[JAVASCRIPT] pobierz, plaintext

Chodzi o to aby po kliknięciu w ahrefa link wyświetliła się treść more i zmieniła klasa i w odwrotnie. Czy w ogóle istnieje takie coś w jQuery jak .html ? Jak to zrealizować ?
Go to the top of the page
+Quote Post
 
Start new topic
Odpowiedzi
meteopata
post
Post #2





Grupa: Zarejestrowani
Postów: 1
Pomógł: 0
Dołączył: 1.08.2012

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


Witam,
dołączę się do tematu ze względu na pokrewieństwo.
Cytat
Mam tabele generowaną w php o zmiennej ilości wierszy w zależności od wybranego dokumentu który przedstawia ów tabela.
Każdy z wierszy posiada ukryty wiersz poniżej w którym są informacje szczegółowe dotyczące wiersza jawnego.
Moim celem jest odkrycie tylko jednego wiersza ukrytego należącego do wiersza "macierzystego" poprzez kliknięcie w zawartość wiersza odkrytego.

Chciałem również zrobić to w taki sposób, że kiedy kliknie się w inny jawny wiersz, otworzy się ukryta zawartość, a schowa się zawartość wiersza poprzednio odkrytego.


-- wiersz jawny --
- > wiersz ukryty --
-- wiersz jawny --
- > wiersz ukryty --
itd

Chciałem użyć zmiany class z .zamkniety na .otwarty gdzie

Klasy css
  1. .zamkniety { display: none; }
  2. .otwarty { }



Skrypt wywołujący zmianę klasy wiersza
  1. <script type= "text/javascript">
  2. function rozwinwiersz(otwarty, zamkniety) {
  3. var el = document.getElementById(zamkniety);
  4. el.className = otwarty;
  5. }
  6. </script>




Link aktywujący zmianę
  1. <a href="java script:void(rozwinwiersz('otwarty', 'zamkniety'))">Zmień klasę</a>


Skrpyt działa, ale odkrywa tylko pierwszy ukryty wiersz w tabeli i nic poza tym.

Wiem, że istnieje sposób natomiast nie wiem jaki, gdyż nie jestem biegłym programistą. Czy mogę prosić o wskazówki?


________________________________________
Witam ponownie,

zrobiłem pewien postęp gdyż żadna z metod nie była skuteczna.
Zagłębiłem się w prezentowane tutaj przykłady i co następuje.

W tabeli są 4 wiersze, widoczne są parzyste czyli wiersz 0 i 2, nieparzyste są ukryte display: none.

Wiersze są zbudowane tak samo żeby mogły wyzwolić funkcję odkrywającą ukryty pod sobą wiersz, jednak ten skrypt odkrywa tylko pierwszy ukryty wiersz, chowając macierzysty.

Jak zrobić tak by każda następna para działała według zasady odkryj wiersz ze szegółami, ukryj poprzedni odkyty, nie zaś macierzysty?

Z góry dziękuję i pozdrawiam

  1.  
  2. <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  3. <style type="text/css" media="all">
  4.  
  5. .ukryty { display: none; }
  6. .widoczny { }
  7. </style>
  8.  
  9. </HEAD>
  10.  
  11. <script type="text/javascript">
  12.  
  13. $(document).ready(function(){
  14. $('#rozwin').click(function(){
  15. $(this).toggleClass('ukryty'); // jeśli usunę klasę 'ukryty', wiersz macierzysty pozostanie widoczny tu nie ma problemu ale nie wiem jak to wykorzystać do przełączania widoczności wierszy dzieci
  16. $('#ukryty').slideToggle();
  17. });
  18. });
  19.  
  20.  
  21. <TABLE border='1'>
  22. <TR id="rozwin"> <!-- pierwszy wiersz macierzysty, klikając gdziekolwiek na nim, odkryje się wiersz dziecko -->
  23. <TD>
  24. rozwiń 1
  25. </TD>
  26. <TD> dane1 dane</TD>
  27. <TD>dane dane</TD>
  28. <TD>dane 6 dane</TD>
  29. <TD>go</TD>
  30. </TR>
  31.  
  32. <TR id="ukryty" style="display: none;"> <!-- wiersz dziecko, rozwija się bez problemu -->
  33. <TD>szczegoly</TD> <!-- właściwie to jest jeden problem, wyświetla tabelę jako display: block, jak to wyświetlić jako display'' bez block -->
  34. <TD>itd3123</TD>
  35. <TD>itd</TD>
  36. <TD>itd3123</TD>
  37. <TD>itd</TD>
  38. </TR>
  39.  
  40. <TR id="rozwin"> <!-- wiersz macierzysty drugi, nie działa nawet jak spróbuję odpalić go jako pierwszy, nie działa również, na wiersz ukryty wyżej -->
  41. <TD> <!-- wierszy będzie zmienna ilość od jednego, przez 3 aż po sto ileś -->
  42. rozwiń 2
  43. </TD>
  44. <TD> dane 4 dane</TD>
  45. <TD>dane 5 dane</TD>
  46. <TD>dane4 dane</TD>
  47. <TD>go</TD>
  48. </TR>
  49.  
  50. <TR id="ukryty" style="display: none;"> <!-- siłą rzeczy ten wiersz jest ukryty cały czas
  51. <TD>szczegoly 2 </TD>
  52. <TD>itd 1</TD>
  53. <TD>itd</TD>
  54. <TD>itd</TD>
  55. <TD>itd 12312</TD>
  56. </TR>
  57.  
  58. </TABLE>
  59.  
  60. </BODY>
  61. </HTML>
  62.  


Ten post edytował meteopata 1.08.2012, 16:19:44
Go to the top of the page
+Quote Post

Posty w temacie


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

 



RSS Aktualny czas: 17.10.2025 - 13:58