Probleme beim Implementieren der Schaltflächen „Anzeigen/Ausblenden“ für die Panel-Funktion in jQuery? ⇐ HTML

[Anonymous]

Ich erstelle eine Blogging-Site. Auf dieser Seite möchte ich, dass sie mehrere Blogeinträge enthält, und ich möchte, dass der Benutzer auf die Schaltfläche „Anzeigen“ klicken kann, um das Bedienfeld nach unten zu verschieben und den jeweiligen Blogeintrag anzuzeigen. Anschließend wird die Schaltfläche mit jQuery in „Ausblenden“ geändert. Wenn der Benutzer dann auf die Schaltfläche „Ausblenden“ klickt, wird der Blogeintrag nach oben verschoben und wieder ausgeblendet. Mehrere Blogeinträge sollten gleichzeitig angezeigt (oder ausgeblendet) werden können.
Dies ist ein Ausschnitt meines Codes:
stories.html

Code: Select all

Blog Title #1
Show
[h4]Date #1[/h4]

Some Paragraph #1

Blog Title #2
Show
[h4]Date #2[/h4]

Some Paragraph #2

main.js

Code: Select all

$(function () {
$(".panel-header button:contains('Show')").on("click", function() {
//show
$(this).text("Hide");

var panelToShow = $(this).parent().attr('rel');

$('#'+panelToShow).slideDown(300, function() {
$(this).addClass('active');
});
//hide
$(".panel-header button:contains('Hide')").on("click", function() {
$(this).text("Show");

var panelToHide = $(this).parent().attr('rel');

$('#'+panelToHide).slideUp(300, function() {
$(this).removeClass('active');
});
});
});

In meiner main.css-Datei ist .panel auf display: none und .panel.active auf display: block gesetzt.
Ich habe bereits versucht, den Ausblendungsteil des JavaScript außerhalb des Callbacks zu platzieren. Aber es funktionierte nicht (d. h. der Blogeintrag konnte nur angezeigt, aber nicht wieder ausgeblendet werden).
Bei diesem konnte der Blogeintrag nur einmal angezeigt und ausgeblendet werden. Danach fängt es an, seltsame Dinge zu tun. Es gleitet nach unten und dann sofort wieder nach oben, nachdem ich auf die Schaltfläche „Anzeigen“ geklickt habe.
Jede Art von Hilfe ist sehr willkommen!
BEARBEITEN Ich habe die Lösung gefunden. Ich bin mir immer noch nicht sicher, warum das oben Gesagte falsch ist oder warum es falsch ist, den Ausblendungsteil außerhalb des Skripts zu platzieren (ich bin neu bei JS/jQuery). Wenn es mir noch jemand erklären könnte, wäre das großartig. Aber dieser Code unten funktioniert. Ich habe gerade eine einfache if/else-Anweisung hinzugefügt.

Code: Select all

$(".panel-header button").on("click", function() {
if ($(this).text() == "Show") {
$(this).text("Hide");

var panelToShow = $(this).parent().attr('rel');

$('#'+panelToShow).slideDown(300, function() {
$(this).addClass('active');
});
}
else {
$(this).text("Show");

var panelToHide = $(this).parent().attr('rel');

$('#'+panelToHide).slideUp(300, function() {
$(this).removeClass('active');
});
}

});