基于显示/隐藏CSS的列宽调整

Question

我在div行中有两个列。左边的是我的主要内容，右边的是聊天室。我希望我的用户能够最小化和打开聊天室，我知道如何做这个部分。然而，当聊天室是开放的时候，我希望我的左栏是col-lg-10，当聊天室关闭时，我希望它变成col-lg-12。我怎么能做到这一点？

Answer 1

使用jQuery (我看到您已经使用了Bootstrap )非常简单：

$(".buttonToggleChat").on("click", function(){
   $(".someSpecificClassColumn").toggleClass("col-lg-10 col-lg-12");
   // ^^ the same selector you want to toggle 10/12 lg classes
});