Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][HTML]toggle ze zmianą img., jak wykonać poprawnie - proszę spojrzeć w kod.
casperii
post 9.08.2016, 17:04:53
Post #1





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

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

[HTML] pobierz, plaintext 
  1. $(document).ready(function(){
  2.  
  3. $('.click_arrow').click(function(){
  4.  
  5.   $("#header-bottom").toggle(function(){
  6.     $(this).animate({height:180},200);
  7.   },function(){
  8.     $(this).animate({height:65},200);
  9.   }
  10.  
  11.   );
  12.  
  13.   });
  14.  
  15. });
  16.  
  17.  
  18. <div id="header-bottom">
  19. powiększamy / pomniejszamy diva
  20.  
  21. <img src="/images/arrow_down.png" class="click_arrow">
  22. </div>
[HTML] pobierz, plaintext


Panowie próbuje zrobić by po kliknięciu w img rozsuwał mi się div oraz img się zmieniał na arrow_up.png z arrow_down.png.
Na razie ten div po kliknięciu jakoś kuleje. Po 1 kliknięciu się rozsuwa po ponownym kliknięciu div się 2 x rozsuwa i chowa. po jeszcze jednym kliknięciu już 3 x czynność się wykonuje. Czy ktoś mi podpowie jak prawidłowo wykonać?
Go to the top of the page
+Quote Post
Comandeer
post 9.08.2016, 18:06:43
Post #2





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Masz starą wersję jQuery (<1.9), gdzie można było jeszcze korzystać z http://api.jquery.com/toggle-event/ – tym samym przy każdym kliku przypinasz nowy handler.


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
casperii
post 9.08.2016, 18:55:17
Post #3





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

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

@Comandeer czy pomógłbyś mi zupgradować jquery do nowszej wersji?
Obecnie mam tak:
<head>
jquery-1.7.1.min.js
modernizr.js
jquery-ui-1.7.1.custom.min.js
selectToUISlider.jQuery.js
</head>

na końcu strony:
jquery.easing.1.3.js
jquery.flexslider-min.js
jquery.validate.js
jquery.form.js
twitter.js
custom.js
Go to the top of the page
+Quote Post
Comandeer
post 9.08.2016, 20:44:42
Post #4





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

Tzn nie bardzo wiem jakbym Ci miał w tym pomóc…?


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
casperii
post 9.08.2016, 20:56:33
Post #5





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

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

@Comandeer chodzi o to, że jeśli zmienie jQuery na np. jquery-2.1.1.min.js to reszta kodu się sypie.
Go to the top of the page
+Quote Post
Comandeer
post 10.08.2016, 11:41:02
Post #6





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

To po prostu przepisz ten klik na taki z flagą wink.gif Jak jest true, to animujesz w jedną stronę, jak false – w drugą. I już wink.gif


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
casperii
post 15.08.2016, 11:12:04
Post #7





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

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

@Comandeer zrobiłem tak:

[HTML] pobierz, plaintext 
  1.   $("#header-bottom").toggle(function(){
  2.  
  3.     $(this).animate({height:180},200);
  4.     $('.click_form_add').html('<img src="images/arrow_up.png">');
  5.   },function(){
  6.     $(this).animate({height:65},200);
  7.     $('.click_form_add').html('<img src="images/arrow_down.png">');
  8.   }
  9.  
  10.  
  11.   );
  12.  
  13. <div id="header-bottom">
  14. <p class="click_form_add" style="cursor:pointer;" id="test"><img src="images/arrow_down.png"></p>
  15. </div>
[HTML] pobierz, plaintext


jak się łatwo domyśleć div rozsuwa i zsuwa się po kliknięciu w cały div header-bottom bez znaczenia w które miejsce.
Chciałbym osiągnąć efekt że po kliknięciu w img osadzony w <p> akcja rozsuwania i chowania się diva będzie działać.
Zatem wymyśliłem sobie, że można to osadzić w zdarzenie click:

[HTML] pobierz, plaintext 
  1. $('#test').click(function(){
  2.  
  3.  
  4.   $("#header-bottom").toggle(function(){
  5.     $(this).animate({height:180},200);
  6.     $('.click_form_add').html('<img src="images/arrow_up.png">');
  7.   },function(){
  8.     $(this).animate({height:65},200);
  9.     $('.click_form_add').html('<img src="images/arrow_down.png">');
  10.   }
  11.  
  12.  
  13.   );
  14.  
  15.  
  16. }); 
[HTML] pobierz, plaintext


lecz tutaj też ten sam cyrk po kliknięciu rozsuwa się div i img się zmienia, po ponownym kliknięciu div się próbuje schować ale rozsuwa się i img się nie zmienia. Kolejne kliknięcia w id=test pomnaża akcje rozsuwania i chowania się diva.

Możesz mi pomóc?
Go to the top of the page
+Quote Post
Comandeer
post 15.08.2016, 17:46:34
Post #8





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

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

A coś tego typu:
Kod
$('#test').toggle(function(){
    $("#header-bottom").animate({height:180},200);
    $('.click_form_add').html('<img src="images/arrow_up.png">');
  },function(){
    $("#header-bottom").animate({height:65},200);
    $('.click_form_add').html('<img src="images/arrow_down.png">');
  }


  );


--------------------
★Mój blog || Okiem krytyka★
Go to the top of the page
+Quote Post
casperii
post 15.08.2016, 18:37:39
Post #9





Grupa: Zarejestrowani
Postów: 680
Pomógł: 28
Dołączył: 14.08.2014

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

Ok super dzięki działa.

Ten post edytował casperii 15.08.2016, 20:42:50
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 Wersja Lo-Fi Aktualny czas: 26.04.2024 - 04:13
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn