jQuery扩展面板延迟问题

以下工作很好：

$(".expandable span").on('click', function(){

    var open = 'expandable-open',   
        iconAdd = 'icon-add',
        iconRemove = 'icon-subtract';

    if($(this).hasClass(iconAdd)){
        $(".static-hostels-list").removeClass(open);
        $(".expandable span").removeClass(iconRemove).addClass(iconAdd);
    }

    $(this).toggleClass(iconAdd).toggleClass(iconRemove);
    $(this).parent().find(".static-hostels-list").toggleClass(open);

});

但是，当我打开一个面板并关闭另一个面板时，两个操作（打开一个和关闭另一个）之间存在延迟

我想缩小这一差距，让它同时发生

CSS

---

你能把它放在JSFIDLE/codepen中吗？也许你应该转换延迟属性：？@Ji_in_编码完成了！您的js似乎不起作用，请修改您的html。结构[ul>div>li]对我来说似乎很奇怪。

.static-hostels-list {
    list-style-type: inherit;
    margin: 1rem 0 0 0;
    overflow: hidden;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    column-count: 3;
    overflow: hidden;
    height: auto;
    max-height: 0;
    -webkit-transition: max-height 1s;
    -moz-transition: max-height 1s;
    -o-transition: max-height 1s;
    transition: max-height 1s;
}

.expandable .expandable-open {
    max-height: 400px;
}