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

Bootstrap切换按钮折叠Flot饼图

1 个答案: