在引导程序中更改DIV的列类

Question

我找到了许多类似的问题，但似乎无法为我提供解决方案，因此希望发布特定代码会有所帮助。

我使用在HTML页面上部署的CASPIO数据。在HTML页面上，我有一个完整的12列Div，当单击链接时，我需要更改为9列Div。这是因为我有一个折叠的3列Div，该Div在单击链接时打开。

所以我需要：

1）在页面上加载3列div倒塌，可见12列Div。

2）用户点击链接和3列Div可见，12列Div更改 到9列Div，因此将其移至3列Div的右侧 而不是下面。

，如果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>

因此，如果我可以将DIV class="col-md-12"更改为#newcomment链接上的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