jquery - 当 span7 和 span5 在 bootstrap 中显示隐藏时如何设置动画

Question

我有带有span7and的Bootstrap布局span5（在span12内）。我想隐藏span7并将span5展开为span12，当一个按钮点击平滑动画时。同样的方式，单击 sam 按钮，span7 和 span5 都应该显示。如何实现这一点？根据父跨度，内部内容也应该是灵活的。

<div id="summary-content" class="contentbar-main" style="display:none;">
                                    <div class="container-fluid">
                                        <div class="row-fluid">
                                            <div class="span12">
                                                <div class="row-fluid no-space">
                                                    <div class="span7" id="sidebarid">
                                                         <div class="myh4">My Summary</div>
                                                         <br>
                                                         <div id="summaryTableId"></div>
                                                    </div>
                                                    <div class="span5" id="contentbarid">
                                                        <div class="row-fluid">
                                                            <div class="span12">
                                                                <div>
                                                                     <span class="summary-left-hide-arrow" id="toggle-button"></span>
                                                                     <span class="myh4">Map</span>
                                                                 </div>
                                                                  <br>
                                                                 <div id="#map-canvas" style="width:100%;height:400px;"></div>
                                                            </div>
                                                        </div>
                                                        <div class="row-fluid">
                                                            <div class="span12">
                                                                <br>
                                                                <div class="myh4">Time Sheet</div><br>
                                                                <div id="newTableId"></div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

Answer 1

假设这是执行此操作的按钮的 html：

<a href="#" id="hideSpan">Hide Span</a>

然后下面的 jQuery 应该可以解决问题（把它放在你的 document.ready 函数中）

$('#hideSpan').click(function() {
  $('#sidebarid').removeclass('span7').addClass('hidden');
  $('#contentbarid').removeclass('span5').addClass('span12');
});

您还需要将以下 css 添加到您的页面

.hidden { display: none; }

更新：忽略前面示例中的添加和删除类，这应该提供流畅的动画。

$('#hideSpan').click(function() {
  $('#sidebarid').hide(1000);
  $('#contentbarid').animate({width: '100%'}, 1000);
});