首先,这里是我的代码的 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 个。
感谢您提供的任何建议:)
最佳答案
您确实需要优化您的代码。首先,您不想为每一行重复点击处理程序,如果您有 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');
关于javascript - Bootstrap table toggle ...如果打开一个新的切换,如何关闭以前的切换?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30826234/