Logic für jQuery Akkordeon, öffnen Sie nur ein Element zu einem Zeitpunkt, sondern auch Close-on-Klick von Open Item - Javascript, jquery

Ich baue ein wirklich einfaches jQuery-Akkordeon (ich kenne das Akkordeon in UI, ich möchte es nicht benutzen).

Ich habe die ganze Sache ziemlich viel Arbeit, aber bin auf der Logik für einen bestimmten Teil fest.

https://jsfiddle.net/sqnfs4kn/

Nur ein Akkordeon sollte immer geöffnet sein. Wenn also der Benutzer klickt, schließe ich alle Akkordeons, unabhängig von dem angeklickten, und öffne dann das angeklickte.

Das funktioniert OK, außer dass ich vermisse Wenn der aktuelle, offene Gegenstand angeklickt wird, sollte er geschlossen werden, so dass keine Gegenstände überhaupt geöffnet sind

Ich kann die Logik dafür nicht herausfinden, denn wenn das aktuelle Element angeklickt wird, ist es momentan so eingestellt, es zu öffnen, wenn es das hat data-status="closed aber das scheint nicht zu funktionieren.

Hier ist mein Akkordeon Code:

$(document).ready(function () {
$(".accordian-item").click(function () {
// close everything first
$(".accordian-text").attr("data-status", "closed");
$("h3").css("background-image", "url(arrow-down.png)");
$(".accordian-text").css("height", "0").css("border-bottom", "none");

console.log("clicked!");
var status = $(this).children(".accordian-text").attr("data-status");
if (status == "closed") {
// open it
$(this).children(".accordian-text").attr("data-status", "open");
$(this).children("h3").css("background-image", "url(arrow-up.png)");
$(this).children(".accordian-text").css("height", "auto").css("border-bottom", "1px solid #c7c5c5");
} else {
// close it
$(this).children(".accordian-text").attr("data-status", "closed");
$(this).children("h3").css("background-image", "url(arrow-down.png)");
$(this).children(".accordian-text").css("height", "0").css("border-bottom", "none");
}
});
});

Antworten:

Sie schließen das geöffnete Fenster, bevor Sie den Status überprüfen. Bewegung

var status = $(this).children(".accordian-text").attr("data-status");

an den Anfang der Funktion, so dass es den Status "offen" erhält und Ihre if-Logik wird dann zum else gehen.