如何在可折叠表格中一次只显示一行

Question

我有以下代码可切换表中的行。我所有的行都使用“标签”类进行点击，并使用“隐藏”类来切换隐藏的数据。如何做到这一点，使用户一次只能看到其隐藏数据的一行，而不能单击多个并看到全部？

    $('[data-toggle="toggle"]').change(function(){
        $(this).parents().next('.hide').toggle();
    });
});

Answer 1

借助not()方法获取所有剩余的元素并隐藏。

$('[data-toggle="toggle"]').change(function(){
    // cache element reference
    let $ele = $(this).parents().next('.hide');
    // toggle element
    $ele.toggle();
    // hide remaining 
    $('.hide').not($ele).hide();
});