Bootstrap 切换按钮折叠 Flot 饼图

Question

我正在尝试添加一个 Bootstrap 切换按钮，按下该按钮会折叠图表。我首先为数据表添加了相同的按钮并且它有效，但是当我将它添加到我的图表时，第一次单击图表所在的面板缩小，第二次单击它隐藏图表，第三次（当它应该打开它）它会打开但它会缩小（在面板之外）。

<div class="mypanel" id="PanelA">
<div class="panel panel-default">
    <div class="panel-body">
        <div class="demo-container">
            <div id="ChartA" class="demo-placeholder"></div>
        </div>
            <div class="demo-container" data-bind="visible:dataList().length>0">
                <br />
                <div class="btn-group" style="padding-right:10px; padding-left:10px">
                    <button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA">
                        <span class="fa fa-bar-chart" aria-hidden="true"></span>
                        <span class="btnFont">Show Chart</span>
                    </button>
                </div>
                <div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div>
            </div>               
        </div>
    </div>
</div>

是否有任何方法可以在按下切换按钮时折叠/显示 Flot 图表？

Answer 1

首先，您的 ID 中缺少双引号。如果您希望 div 开始折叠，您还需要将 class="collapse" 添加到 div。

<div id="ChartA-Overview ...

应该是<div id="ChartA-Overview" class="collapse" ... >

由于您使用的是<button>，因此添加data-target 属性来定位您要折叠和展开的div 的ID（即data-target="ChartA-Overview"）。

编辑 2

有时 Id 来自数据绑定...它类似于 ""ChartA-Overview"+Id(),

如果是这种情况，可以使用jQuery获取div ID添加data-target属性。这是一个代码笔供您查看。

http://codepen.io/yongchuc/pen/QGLdez