Javascript切换多列类

Question

我理解单个类实例如何使用toggleClass，例如

<div class="col-md-9" id="content></div>

$(#content").toggleClass("col-md-12 col-md-9");

这将切换12列和9列。但是，如果我这样设置我的课程怎么办？：

<div class="col-sm-10 col-md-9" id="content"></div>

如果我正在使用多个断点，我找不到为一个元素切换多个类的示例。有线索吗？

Answer 1

鉴于你的元素：

<div class="col-sm-10 col-md-9" id="content"></div>

如果你跑

$("#content").toggleClass("col-sm-10 col-md-9 col-sm-6 col-md-3");

这将在第一次调用时输出以下内容

<div class="col-sm-6 col-md-3" id="content"></div>

然后，如果再次运行切换功能调用，它会将其恢复为

<div class="col-sm-10 col-md-9" id="content"></div>

鉴于您的评论回复，您可能需要两个toggleClass调用

1. 对于侧边栏，您可以切换较大的列尺寸，将其替换为较小的尺寸

2. 内容区域，您可以将列大小切换为更大，前提是您缩小了侧边栏。以下是假设的例子。

要切换侧边栏，您可以将以下两个toggleClass函数运行到＆＃34;切换＆＃34;侧边栏。

$("#sidebar").toggleClass("col-sm-6 col-md-4 col-sm-3 col-md-2"); // Make sidebar 1/2 the size (width)

$("#content").toggleClass("col-sm-6 col-md-8 col-sm-9 col-md-10"); // Enlarge the content area

未经测试的代码，但我们只是在这两个元素的两组维度之间切换。

以上代码段的作用是缩放侧边栏更小，而不是折叠，如果您的＆＃34;崩溃＆＃34;按钮位于侧边栏内。如果它没有，那么你当然可以改变列的大小，让侧边栏根本不在那里。