Toggle DIV 标记内的引导列属性

Posted 2023-05-08

【中文标题】Toggle DIV 标记内的引导列属性

【英文标题】：Toggle Bootstrap Column Properties inside a DIV Tag

【发布时间】：2017-10-22 16:19:33

【问题描述】：

我一直在尝试在 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) 的帮助。

【参考方案1】：

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

<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。现在基于此，您也可以添加左切换按钮。

【讨论】：

几乎！我感谢您的帮助。结果几乎是理想的，除了当您单击橙色按钮时，左列应该再次重新假设 12 列，就像初始状态一样。

因此，左列从 12 列开始，直到单击“切换右”按钮以将右列显示为 3 列，而左列将缩小为 9 列。单击橙色按钮后，Right Column 将缩回，Left Column 现在采用 12 列的值。我在玩这些列，但我不知道这是否是正确的改变。感谢您的帮助！

【参考方案2】：

如果我正确理解您的问题，您希望能够通过单击按钮在 class="col-md-12 col-sm-12 col-xs-12" 和 class="col-md-9 col-sm-9 col-xs-12" 的特定 div 之间切换？

为此，您可以使用 jQuery 执行以下操作：

$("#button-id").click(function()
  if ($("#div-to-change").hasClass("col-md-12")) 
    $("#div-to-change").removeClass("col-md-12 col-sm-12").addClass("col-md-9 col-sm-9");
   else 
    $("#div-to-change").removeClass("col-md-9 col-sm-9").addClass("col-md-12 col-sm-12");
  
);

【讨论】：

切换功能适用于 LeftColumn 从 12column 开始的列，当您单击绿色按钮时，LeftColumn 的值从 12 变为 9，RightColumn 显示为 3 列的值。当您单击橙色按钮时，RightColumn 被隐藏，RightColumn 返回假定 12 列的值。从 12 列交换到 9 列和 3 列，然后再回到 12 列。