4列的jquery调整大小

Question

我有以下 jsfiddle working ，它正在使用这个 JS:

$(".blah").on('click', function () {
    $(this).removeClass('col-md-9');
    $(this).toggleClass('col-md-3 col-md-9');   
    $('.blah').not(this).toggleClass('col-md-3 col-md-1');
});

这就是我需要的，即:使用 bootstrap，有 4 列总加起来等于它们的“12”。目前，如果我单击一列，它会将自身调整为更大，并将其他列更改为更小。但我无法让它工作，所以如果一列设置为 col-md-9，并且我单击另一列，它应该将自己设置为更大，并缩小其他列。在我的测试页面上，这工作得很好，所以列是并排的。不知道为什么我的 jsfiddle 不能正常工作，但它仍然可以表达我的观点。我只希望我点击的任何列都比其他列大。除非我点击较大的列，然后将它们全部设置回相同的大小。

Answer 1

$(".blah").on('click', function () {
    $('.blah').removeClass('col-md-9').addClass('col-md-1');
    $(this).addClass('col-md-9'); 
});

这是更新的 jsfiddle link

希望这有帮助..