Forum PHP.pl > rozwijanie i zwijanie diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: rozwijanie i zwijanie diva - problem

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

user258

13.07.2012, 20:47:18

Witam

Chcę do strony dodać za pomocą jQuery funkcję dzięki której dany div będzie się zwijał i rozwijał.

Mam w belce przycisk z napisem zwiń. Jeśli content zostanie zwinienty to napis zmienia się na rozwin a div zmienia klasę. Problem polega na tym, że jeżeli raz zwine/rozwine to jest ok ale jeśli chcę to zrobić więcej razy to klasa i napis się nie zmieniają.

Oto cały kod:

[HTML] pobierz, plaintext 
<html>
<head>
	<title>Zwin/rozwin</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
   #belka {width: 200px; height: 30px; background: #0C9;}
   .zwin { float: right; background: #F00; padding: 3px; margin: 2px 5px 0 0; }
   .zwin.rozwin { background: #900;}
   #panel {width: 200px; background: #36C;}
   p { padding: 10px; margin: 0;}
</style> 
 
<script type="text/javascript">
$(document).ready(function() {
 
	var $Button = $("#belka .zwin");
	var $Panel = $("#panel");
 
	$Button.click(function(){
		$Panel.slideToggle(1000);
		$Button.addClass("rozwin").text("rozwin");
			$Button.click(function(){
				$Button.removeClass("rozwin").text("zwiń");
			});
	});
 
});
</script>
</head>
 
<body>
<div id="belka">
	<div class="zwin">zwiń</div>
</div>
<div id="panel">
	<p>Lorem ipsum dolor sit amet</p>
    <p>Lorem ipsum dolor sit amet</p>
</div>
</body>
</html>
[HTML] pobierz, plaintext

http://jsfiddle.net/WmAkc/

Necsord

13.07.2012, 23:01:07

Dobrze, że dałeś jsfiddle'a, przynajmniej łatwiej / przyjemniej sie sprawdza.

http://jsfiddle.net/WmAkc/1/
Przekombinowałeś z tymi zagnieżdżonymi akcjami.
http://api.jquery.com/on/
http://api.jquery.com/stop/

Twój kod działał za pierwszym razem tylko dla tego ze druga akcja dopiero po pierwszym wykonaniu została doczepiona do przycisku, czyli przy każdym kolejnym wywołaniu wykonywane były obie - ta nadrzędna jak i ta zagnieżdżona, czyli w efekcie końcowym nie było ani klasy ani napisu rozwiń.

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.