javascript - Bootstrap table toggle ...如果打开一个新的切换，如何关闭以前的切换？

Question

首先，这里是我的代码的 jsFiddle:

http://jsfiddle.net/ae1Lxcc1/3/

我有一个 Bootstrap 表，人们可以在其中打开和关闭带有附加信息的开关。它们每个都有不同的 ID，例如 toggle-00001、toggle-00002，但也可能是 toggle-43894。

我将其用于每个 ID:

$(".toggle-00001").on('click', function (event){
 event.preventDefault();
    $(this).closest('tr').toggleClass("row-selected");
    $(this).closest('tr').next('tr').toggleClass("row-selected");
    $(".details-00001").slideToggle("fast");
    $(this).html(function(i,html) {
    if (html.indexOf('color-grey') != -1 ){
        html = html.replace('icon-grey','icon-green');
    } else {
        html = html.replace('icon-green','icon-grey');
    }
    return html;
 });
});

有没有什么简单的方法，无需重写大部分代码，就可以在切换一个新的时关闭另一个？

换句话说，我希望始终只打开 1 个开关，这样用户就不能一次打开 100 个。

感谢您提供的任何建议:)

Answer 1

您确实需要优化您的代码。首先，您不想为每一行重复点击处理程序，如果您有 100 个怎么办？

你可以做的就是给 details 和 toggle 行相同的类，然后 JS 会变得更简单:

$(".toggle").on('click', function (event) {
    event.preventDefault();


    var $row = $(this).closest('tr'),
        $nextRow = $row.next('tr.details');

    $('tr').not($nextRow).not($row).removeClass('row-selected');

    $nextRow.add($row).toggleClass("row-selected");

    $(this).html(function (i, html) {
        if (html.indexOf('color-grey') != -1) {
            html = html.replace('icon-grey', 'icon-green');
        } else {
            html = html.replace('icon-green', 'icon-grey');
        }
        return html;
    });
});

我还将 style="display: none"移动到 CSS(.details 类):

.details {
    display: none;
}
.row-selected {
    background-color: #DDD;
    display: table-row;
}

演示:http://jsfiddle.net/ae1Lxcc1/4/

最后，切换图标也可以优化为:

$(this).find('.color-gray').toggleClass('.icon-grey .icon-green');