/ / Логика за jQuery акордеон, отворете само един елемент наведнъж, но също и близо до клик върху отворен елемент - javascript, jquery

Логика за jQuery акордеон, отворен само един елемент в даден момент, но и близък клик върху отворен елемент - javascript, jquery

Изграждам наистина базов jQuery акордеон (аз съм запознат с акордеона в потребителския интерфейс, не искам да го използвам).

Аз имам всичко, което почти работи, но останах логично за една конкретна част.

https://jsfiddle.net/sqnfs4kn/

Само един елемент от акордеон трябва да е отворен в даден момент. Така че, когато потребителят кликне, затварям всички акорди независимо от кликвания, а след това отварям кликвания.

Това работи добре, освен ако не ми липсва когато се кликне върху текущия отворен елемент, той трябва да се затвори, така че изобщо да не са отворени елементи

Не мога да разбера логиката за това, защото когато се кликне върху текущия елемент, в момента е настроен да го отвори, ако има data-status="closed но това не изглежда да работи.

Ето моя акордеон код:

$(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");
}
});
});

Отговори:

3 за отговор № 1

Затваряте отворения панел, преди да проверите състоянието. Ход

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

до върха на функцията, за да получи статус "отворен" и ако логиката ви ще отиде до другата.