javascript - Bootstrap 在单击到侧面时调整容器大小

Question

我有两个 div...

<div class="row">    
    <div id="general" class="col-sm-4">
        <p>General content.</p>
        <p id="show">Open extra content.</p>
    </div>
    <div id="extra" class="alert alert-info col-sm-8">
        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>            
        <p>Here is the extra content!</p>
    </div>
</div>

一般内容 div 应始终显示，而额外内容 div 应在单击 #show 段落时显示。

可以看到，一般div为页面的1/3，额外div为页面的2/3(打开时)。

我希望通用div在额外div关闭时填充页面的整个宽度，并在打开时填充通常的1/3，使其行为像这样......

我如何使用 jQuery/Javascript/CSS3 做到这一点？

Answer 1

我认为如果您要更改 div #general 类，请解决它。首先，当#extra关闭时，#general设置class="col-sm-12"并使用此代码；

    $("#general").click(function(){
    $(this).toggleClass('col-sm-12 col-sm-4');
    $("#extra").show();
});

当 div #extra 关闭时，您可以再次使用此代码。