javascript - 切换 DIV 标记内的 Bootstrap 列属性

Question

我一直在尝试在 div 标签内交换 Bootstrap 类属性。我想充分利用 Bootstrap 12 列网格，但将 12 列切换为 9 列和 3 列布局。示例如下:

这是JDFIDDLE DEMO 。这是示例代码:

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <div id="LeftColumn" class="col-md-9 col-sm-9 col-xs-12">
    <h3>Left Column</h3>
    <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.</p>
    <p><span class="strong">DESIRED RESULT:</span>Toggle the properties &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; to &lt;div class="col-md-9 col-sm-9 col-xs-12"&gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p>
    </p>
    <div id="Bar" class="main-container collapse in">
      <a href="#Foo" class="btn btn-success" data-toggle="collapse">Toggle Right</a>
    </div>
    <div class="clearfix"></div>
    <br />
  </div>
  <div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12">
    <div id="Foo" class="main-container collapse" style="border: dotted 1px green;">
  Toggle Left Column <a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>Additional content will be displayed in this column once triggered.
      <div style="height: 150px;"></div>
    </div>
  </div>
</div>

我需要维护现有按钮“向右切换”和“向左切换”按钮中已有的切换功能。

我非常感谢一些帮助，让 RightColumn 和 LeftColumn 中的类分别从 12 (col-md-12) 切换到 9 (col-md-9) 和 3 (col-md-3)。

Answer 1

您可以使用 Js/Jquery 来做到这一点。我已经更新了切换右侧按钮的代码，假设最初您的左列设置为 col-md-12。单击切换按钮，您可以添加或删除您喜欢的任何类(class)。更新后的代码如下。
`

<div class="container-fluid col-lg-12 border-red">
<div class="col-lg-12 align-center"><h3>Sample Table</h3></div>
  <div class="col-md-12 col-sm-12 border-black align-center">
  Right Column Full 12 Columns (col-md-12) before triggering Toggle button.
  </div>
  <div class="clearfix"></div>
  <div class="col-md-9 col-sm-9 col-xs-12 border-green">Main Container (col-md-9) after toggle button is clicked should still maintain its responsiveness properties.<br /></div>
  <div class="col-md-3 col-sm-3 col-xs-12 border-blue">Toggle Right Column<br />(col-md-3)</div>
</div>

<hr />

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
      <div id="LeftColumn" class="col-md-12 col-sm-12 col-xs-12">
        <h3>Left Column</h3>
        <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintining the its responsive properties.</p>
        <p><span class="strong">DESIRED RESULT:</span>Toggle the properties &lt;div class="col-md-12 col-sm-12 col-xs-12"&gt; to &lt;div class="col-md-9 col-sm-9 col-xs-12"&gt; when the "Toggle Right" column button is clicked while maintaining the existing functionality.</p>

        <div id="Bar" class="main-container collapse in">
          <a href="#Foo" class="btn btn-success" data-toggle="collapse" id ="toggle-right">Toggle Right</a>
        </div>
        <div class="clearfix"></div>
        <br />
      </div>
      <div id="RightColumn" class="col-md-3 col-sm-3 col-xs-12">
        <div id="Foo" class="main-container collapse" style="border: dotted 1px green;">
      Toggle Left Column <a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>Additional content will be displayed in this column once triggered.
          <div style="height: 150px;"></div>
        </div>
      </div>
    </div>`  

更新js代码如下

    $(".main-container.collapse").on('shown.bs.collapse', function() {
  //when a collapsed div is shown hide all other collapsible divs that are visible
  $(".main-container.collapse").not($(this)).collapse('hide');
});
$('#toggle-right').click(function(e) {
var left = $('#LeftColumn');
if(left.hasClass('col-md-9'))
{
left.removeClass("col-md-9 col-sm-9").addClass("col-sm-12 col-md-12");
}
else
{
left.removeClass("col-md-12 col-sm-12").addClass("col-sm-9 col-md-9");
}
})

您更新的 JsFiddle 是 here 。现在，在此基础上，您还可以添加左侧切换按钮。