Jquery调整4列的大小

我有以下内容，使用这个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

，我单击另一列，它应该将自身设置为更大，并收缩其他列。在我的测试页面上，这很好，因此列并排排列。我不知道为什么我的JSFIDLE不能同样工作，但它仍然可以让我明白我的观点。我只希望我点击的任何一个栏目都比其他栏目大。除非我单击较大的列，然后将它们全部设置回相同的大小

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

以下是最新的

---

希望这有帮助。

jQuery

$(".blah").on('click', function () {
    if ($(this).hasClass('col-md-9')) {//if large
        $(this).removeClass('col-md-9').addClass('col-md-3')//remove 9 add 3
        .siblings('.col').removeClass('col-md-1 col-md-9').addClass('col-md-3');//remove 1,9 add 3
    } else {//if not large
        $(this).removeClass('col-md-1 col-md-3').addClass('col-md-9')//remove 1,3 add 9
        .siblings('.col').removeClass('col-md-3 col-md-9').addClass('col-md-1');//remove 3,9 add 1
    }
});

.toggleClass（）

可能会变化无常，请确保在不希望元素具有特定类的实例中使用

.removeClass（）

，并在应该始终添加特定类的地方使用

addClass（）

我将其包装在一个

if

语句中，因为这里移动了两个以上的类，并且一个特定的单击元素可以有一个包含任何选项的当前类

我还在列上添加了一个

.col

类，它向列中添加了

float:left

，以便它们内联嵌套

---

这也可以在没有网格框架的情况下内联完成：

您可以尝试在单击时从所有div标记中删除col-md-9类，而不是仅从您单击的标记中删除。像这个$（“.blah”）.removeClass（“col-md-9”）；而不是$（this.removeClass（“col-md-9”）；出于好奇，为什么

.toggleClass（）

变化无常？toggleClass一点也不变化无常。。。在

或

场景中，当它与多个类一起使用时，您始终可以传递第二个参数，在这种情况下，一次只能有一个类，您必须小心，一次只能应用一个类，并且在您永远不希望应用该类的实例中不使用toggle；这不符合问题的要求，“除非我单击较大的列，然后将它们全部设置回相同的大小。”