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

最初将col-sm-12类添加到您的#general中，以便它完全显示并隐藏带有hide类的#extra div。然后在按钮上单击，使用jquery交换类以显示#extra div。

$("#show").on('click',function(){
  if($("#extra").hasClass('hide')){ 
      // in case its already hidden
      $("#general").removeClass('col-sm-12').addClass('col-sm-4');
      $("#extra").removeClass('hide').addClass("show");
  } else {
      // in case its already visible
      $("#general").removeClass('col-sm-4').addClass('col-sm-12');
      $("#extra").removeClass('show').addClass("hide");
  }
});

Answer 2

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

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

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