引导折叠时触发窗口调整大小答案

【问题标题】：Trigger window resize on bootstrap collapse引导折叠时触发窗口调整大小
【发布时间】：2016-08-09 12:38:31
【问题描述】：

我在放置在引导折叠 div 中的 c3.js 图表时遇到大小问题。类似于this question。按照答案，我试图在每次加载 c3 图表时触发窗口调整大小，但似乎不起作用。我知道这是一个基本问题（jquery ignorant），但我如何在每次加载图表或打开面板折叠 div 时运行$(window).trigger('resize');？

html:

<div class="col-sm-4">                  
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href="#collapse4"><center>Title</center></a>
                </h4>
            </div>
            <div id="collapse4" class="panel-collapse collapse">
                <div id="chart3"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>
</div>

js:

$(function () {
    var chart = c3.generate({
        bindto: '#chart3',
        data: {
            columns: [
                ['data1', 30],
                ['data2', 50]
            ],
            type: 'donut',
        }
    });
    $(window).trigger('resize');
});

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

绑定到.click() 事件：

$(document).ready(function() {
  $(".panel-collapse collapse").click(function() {
    $(window).trigger('resize');
  });
});

对于图表加载，这将取决于您如何调用它来生成。如果c3.generate() 是图形加载函数，则创建另一个包装函数，它同时调用c3.generate() 和$(window).trigger('resize');，然后始终加载图表：

function generateAndResizeWindow(options) {
  options.onrendered = function() { $(window).trigger('resize') }; // or whatever function generates your graph
  c3.generate(options);
}

然后调用为：

generateAndResizeWindow({
    bindto: '#chart3',
    data: {
        columns: [
            ['data1', 30],
            ['data2', 50]
        ],
        type: 'donut',
    }
});

你的例子。

【讨论】：

将 .panel-collapse collapse 更改为 .panel-collapse 并完美运行

【解决方案2】：

在您的代码之后添加这些行。

chart.load({
  done: function() {$(window).trigger('resize');}
});

【讨论】：