Forum PHP.pl > [JavaScript][HTML]toggle ze zmianą img.

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][HTML]toggle ze zmianą img.

casperii

9.08.2016, 17:04:53

[HTML] pobierz, plaintext 
$(document).ready(function(){
 
$('.click_arrow').click(function(){
 
  $("#header-bottom").toggle(function(){
    $(this).animate({height:180},200);
  },function(){
    $(this).animate({height:65},200);
  }
 
  );
 
  });
 
});
 
 
<div id="header-bottom">
powiększamy / pomniejszamy diva
 
<img src="/images/arrow_down.png" class="click_arrow">
</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ć?

Comandeer

9.08.2016, 18:06:43

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.

casperii

9.08.2016, 18:55:17

@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

Comandeer

9.08.2016, 20:44:42

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

casperii

9.08.2016, 20:56:33

@Comandeer chodzi o to, że jeśli zmienie jQuery na np. jquery-2.1.1.min.js to reszta kodu się sypie.

Comandeer

10.08.2016, 11:41:02

To po prostu przepisz ten klik na taki z flagą

Jak jest true, to animujesz w jedną stronę, jak false – w drugą. I już

casperii

15.08.2016, 11:12:04

@Comandeer zrobiłem tak:

[HTML] pobierz, plaintext 
  $("#header-bottom").toggle(function(){
 
    $(this).animate({height:180},200);
    $('.click_form_add').html('<img src="images/arrow_up.png">');
  },function(){
    $(this).animate({height:65},200);
    $('.click_form_add').html('<img src="images/arrow_down.png">');
  }
 
 
  );
 
<div id="header-bottom">
<p class="click_form_add" style="cursor:pointer;" id="test"><img src="images/arrow_down.png"></p>
</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 
$('#test').click(function(){
 
 
  $("#header-bottom").toggle(function(){
    $(this).animate({height:180},200);
    $('.click_form_add').html('<img src="images/arrow_up.png">');
  },function(){
    $(this).animate({height:65},200);
    $('.click_form_add').html('<img src="images/arrow_down.png">');
  }
 
 
  );
 
 
}); 
[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?

Comandeer

15.08.2016, 17:46:34

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">');
  }

  );

casperii

15.08.2016, 18:37:39

Ok super dzięki działa.

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.