Forum PHP.pl > [JavaScript]Niedziałający slider jQuery

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript]Niedziałający slider jQuery

m.e.n.t.o.s.

13.11.2009, 19:43:25

Witam, mam pewien problem z prostym kodem jQuery. Niby powinno działać, ale nie działa. Ja nie mogę doszukać się błędu, ale może ktoś z Was go znajdzie. Przejdźmy do sedna sprawy. Mam taki kod jQuery:

Kod

$(document).ready(
function()
{
    $('<div class="pre">ZWIŃ</div>').insertBefore($("pre"));
    $("div.pre").toggle(
    function()
    {
        $(this).next("pre").slideUp("normal", function()
        {
            $(this).prev("div.pre").text('ROZWIŃ').removeClass("pre").addClass("pre_zwin");
        });
    },
    function()
    {
        $(this).next("pre").slideDown("normal", function()
        {
            $(this).prev("div.pre").text('ZWIŃ').removeClass("pre_zwin").addClass("pre");
        });
    });

    $("h2.comments").toggle(
    function()
    {
        $(this).next("ul.comments").slideUp("normal", function()
        {
            $(this).prev("h2.comments").text('Komentarze - ROZWIŃ');
        });
    },
    function()
    {
        $(this).next("ul.comments").slideDown("normal", function()
        {
            $(this).prev("h2.comments").text('Komentarze - ZWIŃ');
        });
    });
});

Do tego taki css:

Kod

ul.comments {
    text-align: justify;
    margin: 10px;
    margin-top: 0px;
    padding-left: 0px;
    list-style-type: none;
}
h2.comments {
    padding: 5px;
    margin-bottom: 0px;
    height: 15px;
    cursor: pointer;
    color: #0000ff;
    text-decoration: underline;
    border: 1px solid #ccccdd;
    background: #fff8ee url('./../graphics/tlo_comments.gif') 0 0 repeat-x;
}
div.pre, div.pre_zwin {
    margin: 15px;
    margin-bottom: 0px;
    padding: 5px;
    height: 15px;
    cursor: pointer;
    color: #0000ff;
    text-decoration: underline;
    border: 1px solid #ccccdd;
    border-bottom: 0px;
    background: #eeeeff url('./../graphics/tlo_pre.gif') 0 0 repeat-x;
}
div.pre_zwin {
    margin: 15px;
    border-bottom: 2px solid #ccccdd;
}
pre {
    border: 1px solid #ccccdd;
    border-top: 0px;
    background: #eeeeff;
    color: #0000aa;
    padding: 10px;
    margin: 15px;
    margin-top: 0px;
    display: block;
}

i HTML:

Kod

<pre>
.....
</pre>
<h2 class="comments">Komentarze - ZWIŃ</h2>
    <ul class="comments">
        ......
    </ul>

Są to dwa niezależne fragmenty kodu, które mają pewną część strony zwijać i rozwijać. Kod dla komentarzy działa bez problemu. Natomiast kod dla elementów pre - nie. Po każdym kliknięciu na div.pre pre się rozwija i zwija, ale już tekst pozostaje cały czas taki sam (ROZWIŃ) i klasę ma też taką samą (div.pre_zwin).

Prosze o jakiś feedback.

adasiu

14.11.2009, 00:22:05

[HTML] pobierz, plaintext 
    $(document).ready(function() {
    	$(".down").hide();
    	$(".down").click(function() {
    		$(".zwijane").slideDown("slow");
    		$(".down").hide();
    		$(".up").show();
    	});
    	$(".up").click(function() {
    		$(".zwijane").slideUp("slow");
    		$(".up").hide();
    		$(".down").show();
    	});
		});
 
 
<div style="border: 1px solid green">
	<span class="down">rozwiń</span> <span class="up">zwiń</span>
	<div class="zwijane">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.	
	</div>
</div>
[HTML] pobierz, plaintext

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.