Question

我需要有关Bootstrap Columns Toggle的帮助，它将12列网格转换为9列和3列的其他两列，并再次返回12列。

我有一个原型，但我似乎无法做到这一点。这是JSFIDDLE。

要理解这个问题，我有3个不同的场景，在原型中解释，基本上从12列开始，切换到9 + 3列，然后回到12列。

HTML代码如下：

<div class="container-fluid col-lg-12 col-md-12 col-sm-12 col-xs-12">
  <h2 class="align-center">Current Prototype</h2></div>
   <div id="LeftColumn" class="col-md-12 col-sm-12 col-xs-12">
    <h4>Left Column</h4>
    <p>Currently is set to col-md-9, but it should initially be col-md-12 and be toggled to col-md-9 while maintaining 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>

需要注意的Javascript如下：

$(".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 提供的任何帮助和专业知识。谢谢！

Answer 1

切换时只需要做一些小改动。

问题：您正在点击#toggle-right按钮添加/删除课程，这很好，但您不会再在下一个切换按钮上执行相同操作，即<a>按钮1个}（黄色警告按钮）一旦你的12列被分成9和3。

<a href="#Bar" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>

<强>解决方案：

您需要做的就是调用同样的功能，即在点击<a>按钮时添加/删除类。首先给元素一个类或一个id来识别它。

<a href="#Bar" id="toggle-left" class="btn btn-warning" data-toggle="collapse"><i class="fa fa-bars"></i></a>

现在您只需要在现有的点击功能中添加新的选择器。

$('#toggle-right, #toggle-left').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");
  }
})

Bootstrap列使用Javascript进行切换

1 个答案: