Question

首先，我的代码是jsFiddle：

我有一个Bootstrap表，人们可以在其中打开和关闭带有附加信息的切换。它们各自具有不同的ID，例如data <- data.frame(Score, Sex, Study)，toggle-00001，但也可能是toggle-00002。

我为每个ID使用它：

toggle-43894

有没有简单的方法，如果没有重写大部分代码，那么如果切换一个新的，另一个被关闭了吗？

换句话说，我希望在任何时候只有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');

Bootstrap表切换...如果打开新的切换，如何关闭上一个切换？

1 个答案: