Question

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

我使用部署在html页面上的Caspio数据页。在一个html页面上，我有一个完整的12列div，当点击链接时我需要更改为9列div。这是因为我在单击链接时打开了折叠的3列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>

因此，如果我可以在class="col-md-12"链接上将div class="col-md-9"更改为div #newcomment，请单击该应该执行此操作。非常感谢 -

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

在bootstrap

1 个答案: