javascript - 在 Bootstrap 中更改 div 的列类

Question

我发现了许多类似的问题，但似乎无法让他们的解决方案为我工作，因此希望发布具体代码会有所帮助。

我使用部署在 html 页面上的 Caspio 数据页。在 html 页面上，我有一个完整的 12 列 div，当单击链接时，我需要将其更改为 9 列 div。这是因为我有一个折叠的 3 列 div，它会在单击链接时打开。

所以我需要的是:

1) upon page load 3 column div collapsed, 12 column div visible.

2)user clicks link and 3 column div is visible and 12 column div changes to 9 column div so it is moved to the right of the 3 column div instead of below it.

如果 css 很密集(发生时是随机的，所以我无法详细描述)，Caspio 数据页可能会变得困惑，所以我需要尽可能简单。如果我可以将链接上的 div class="col-md-12" 更改为 div class="col-md-9"，那就太好了。我看过其他更改列类的帖子，但我似乎无法让它们工作。

这是我正在使用的主要代码:

<div class="col-md-3" style="overflow-x:hidden;overflow=y:hidden;">
	<div id="newcomment" class="collapse">
		<caspio deploy code for datapage1>
	</div>
</div>
<div class="col-md-12">
	<div>
		<caspio deploy code for datapage2>
	</div>
</div>

<a class="btn page-action" href="#newcomment" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Add Comment</a>

所以如果我可以在 #newcomment 上将 div class="col-md-12" 更改为 div class="col-md-9" 链接点击应该可以做到这一点。非常感谢 -

Answer 1

有几种方法可以做到这一点。这是一个...

$('#btnSwitch').click(function(){
    $('.col-md-3').toggleClass('hide');
    $('#right').toggleClass('col-md-12 col-md-9');
})

HTML

<div class="container-fluid">
    <div class="row">
        <div class="col-md-3">
                page1
        </div>
        <div class="col-md-9" id="right">
                page2
        </div>
    </div>
    <br>
    <button class="btn btn-lg" id="btnSwitch">Switch</button>
</div>

http://www.codeply.com/go/pFNLZqoZUV