jQuery手风琴的逻辑，一次只打开一个项目，但也打开项目的近距离点击

Question

我正在构建一个非常基本的jQuery手风琴（我知道UI中的手风琴，我不想使用它。）

我让整个事情变得非常有效，但我仍然坚持一个特定部分的逻辑。

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');
        }
    });
});

Answer 1

在检查状态之前，您正在关闭打开的面板。移动

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

到函数的顶部，这样它的状态为“open”，你的if逻辑将转到else。