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

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