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列总是加起来＆＃34; 12＆＃34;。目前，如果我单击一列，它会将自身调整为更大，并将其他更改为更小。但我无法使其工作，因此，如果将一列设置为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

希望这会有所帮助..

Answer 2

<强>的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，使它们嵌套在内。

<强> Made A Fiddle...

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

Jquery调整了4列的大小

2 个答案: