根据显示/隐藏CSS调整列宽度

adjusting column width based on show/hide CSS

本文关键字:调整 CSS 隐藏 显示      更新时间:2023-09-26

我在一个div行中有2列。左边的是我的主要内容,右边的是聊天室。我希望我的用户能够最小化和打开聊天室,我知道如何做到这一点。然而,当聊天室是开放的,我希望我的左列是coll -lg-10,当聊天室是关闭的,我希望它成为coll -lg-12。我怎样才能做到这一点呢?

使用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
});