0

背景

我刚刚决定将我的 Django 应用程序升级到 bootstrap 3，在将手风琴更改为面板后，我发现以前可以工作的 Jqplot 不再工作了。我有三个手风琴作为一个组，每个手风琴都包含一个 Jqplot 脚本，以及一个必须在其中显示情节的 div。

这是骨架的外观：

<div class="panel-group" id="accordion2">
  <div class="panel panel-default">
    <div class="panel-heading">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
          First Heading
        </a>
       <script>
        $(document).ready(function(){
          // generic jqplot barchart that goes like this...
          // var plot1 = $.jqplot('chartdiv', s1, {...
          });
        </script>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <div id="chartdiv"></div>
        </div>
      </div>
    </div>

同样的事情发生在另外两个panel panel-defaultdiv 上。（另外两个以相同方式编写的图。）

问题

它在这一行： <div id="collapseOne" class="panel-collapse collapse in">

当我有一个面板折叠时class="panel-collapse collapse"，它会像预期的那样折叠，但是即使document.ready()在它内部被调用，也不会生成该图。

但是，如果我将其设置为class="panel-collapse collapse in"，则面板不会折叠，并且还会生成绘图。

问题

我需要让第一个面板未折叠，其他两个默认折叠，但是当我使用上面提到的类这样做时，不会生成第二个和第三个图（具体来说，没有生成 Jqplot 画布）。

我想这一定与 Bootstrap 3 及其对手风琴的更改有关，因为它曾经在我的旧应用程序（使用旧版本）中工作。

我怎样才能克服这个问题？

4

1 回答 1

1

您在 document.ready 上生成图是正确的，因为折叠只会通过 css 隐藏内容。阅读此问题fullcalendar 在单击按钮或调整窗口大小之前不可见？也许它也会帮助你。

要在折叠时“实时”生成内容，请考虑折叠插件的事件，请参阅： http: //getbootstrap.com/javascript/#collapse-usage。例如，您可以尝试在 shown.bs.collapse 上生成绘图。

请务必阅读：http ://learn.jquery.com/using-jquery-core/document-ready/

于 2013-09-30T20:58:24.403 回答