Ich bin kein Experte für das Programmieren mit jQuery, aber ich habe ein wenig Kenntnisse über die Sprache. Ich möchte, dass ein Div sichtbar und das andere ausgeblendet wird, sobald Sie auf das andere Div klicken, sollte es nach unten rutschen und das zuerst sollte man versteckt sein.

Der Fehler ist, dass wenn Sie eine div atm drücken, es durcheinander kommt.

    $(document).ready(function () {
        $('#link').click(function () {
            if ($('.todo-post').is(":hidden")) {
                $('#date-visible').slideUp("slow");
                $('#date-hidden').slideDown("slow");
                $('#tick-hidden').slideDown("slow");
                $('.todo-post').slideDown("slow");
            } else {
                $('.todo-post').slideUp("slow");
                $('#date-hidden').slideUp("slow");
                $('#tick-hidden').slideUp("slow");
                $('#date-visible').slideDown("slow");
            }
        });
    });

Das ist der Code, den ich gerade benutze. Er funktioniert für ein Div. Es gibt überall Text. Wenn ich ein anderes Div hinzufüge, wird es chaotisch. Ich glaube, dass der Code neu erstellt werden kann, damit er ordnungsgemäß funktioniert, aber leider weiß ich nicht wie und habe jetzt eine Weile im Internet gesucht.

LINK ZU MEINER WEBSITE

2
Samuel Masih 2 Dez. 2013 im 22:00

3 Antworten

Beste Antwort

Grundsätzlich geschieht, dass unsere Elemente eine absolute Position haben. Wenn Sie diese CSS hinzufügen, funktioniert dies:

div.todo-avatar-date-hidden {
    position: static;
}
div.todo-tick {
    position: static;
}
div.todo-post {
    position: static;
}

Außerdem müssen Sie es relativ nahe am unteren Rand Ihres CSS platzieren, da es sonst vom vorherigen Code überschrieben wird. Ich empfehle daher, zu jedem Element in dem angezeigten CSS zu wechseln und die Zeile zu entfernen, die das Element absolut macht

Bearbeiten

$('#link').click(function () {
    if($('#date-visible').is(':hidden')) {
        if(!($('#date-visible-2').is(':hidden'))) {
            $('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
        }
    }
    $('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
});
$('#link-2').on('click', function () {
    if($('#date-visible-2').is(':hidden')) {
        if(!($('#date-visible').is(':hidden'))) {
            $('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
        }
    }
    $('#date-visible-2, #date-hidden-2, #tick-hidden-2, .todo-post-2').slideToggle("slow");
});
1
Hive7 2 Dez. 2013 im 19:23

IDs sollten eindeutig sein, keine zwei Elemente können dieselbe ID auf derselben Seite haben. Sie verwenden dieselbe ID wie "Datum sichtbar" in Ihrer HTML-Seite. Ändern Sie sie und codieren Sie sie entsprechend.

0
Akshat 2 Dez. 2013 im 18:11

Sie können dies mit weniger Code tun

    $(document).ready(function () {
      $('#link').on('click', function () {
        $('#date-visible, #date-hidden, #tick-hidden, .todo-post').slideToggle("slow");
      });
    });
2
fauverism 2 Dez. 2013 im 18:20